/**
* 2010-2026 SwissGeek | Web Developer Freelance
*
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https:// opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https:// devdocs.prestashop.com/ for more information.
*
* @Module		SGK Shop Payment
* @Description	Lets your customers order online and pay directly in your shop.
* @Version		2.3.0
* @Copyright	SwissGeek | Web Developer Freelance <https://swissgeek.dev/>
* @support		Support Requests <https://admin.swissgeek.dev/forms/ticket?styled=1&with_logo=1>
* @Blog			Breaking News <https://news.swissgeek.dev/> <https://news.prestageek.ch/>
* @Addons		Developments <https://prestageek.ch/> <https://add.swissgeek.dev/>
*
* @license		http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*				Valid for 1 website (or project) for each purchase of license International Registered 
*				Trademark & Property of SwissGeek. More information on <https://swissgeek.dev/license/>
*/

/* --------------------------------------------------------------------------
   Front office of SGK Shop Payment.

   Only the accepted-payment-methods banner lives here. Everything is prefixed
   with sgkpsshoppay- so the sheet can never repaint the theme, and the theme
   can never mistake one of these rules for one of its own.
   -------------------------------------------------------------------------- */

.sgkpsshoppay-banner {
    margin: 14px 0 0;
    text-align: center;
}

/* The theme styles the paragraph itself; only its trailing margin is ours to settle,
   so the banner below sits at the distance this sheet declares and not at twice it. */
.sgkpsshoppay-infos p:last-child {
    margin-bottom: 0;
}

/* <picture> is inline by default: without this line it leaves a baseline gap under the
   image and the surrounding block carries a few pixels of dead space. */
.sgkpsshoppay-banner__pic {
    display: block;
}

.sgkpsshoppay-banner__img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
}

.sgkpsshoppay-return .sgkpsshoppay-banner {
    margin-top: 18px;
}

.sgkpsshoppay-return .sgkpsshoppay-banner__img {
    max-width: 620px;
}

/* Both selectors are repeated in every breakpoint on purpose. A selector list gives each
   member its own specificity, so `.sgkpsshoppay-return .sgkpsshoppay-banner__img` (0,2,0)
   is the only thing that can override the confirmation rule above. Written with the bare
   class alone, these media rules are simply dead on the confirmation page — measured on
   2.1.0, where the 767px cap computed to 620px at a 390px viewport. */
@media (max-width: 767.98px) {
    .sgkpsshoppay-banner__img,
    .sgkpsshoppay-return .sgkpsshoppay-banner__img {
        max-width: 100%;
    }
}

/* Under this width <picture> has served the three-row variant: it is tall and narrow, so
   it is capped in width to keep it from becoming an oversized column on a small tablet.
   The threshold is the same one the template writes in its media attribute —
   BANNER_BREAKPOINT on the PHP side. Change one, change the other. */
@media (max-width: 575.98px) {
    .sgkpsshoppay-banner__img,
    .sgkpsshoppay-return .sgkpsshoppay-banner__img {
        max-width: 340px;
    }
}