/* IG International - additions: product pages, contact page, keyboard focus. Loaded after ig.css. */

/* Visible keyboard focus on every interactive element (works on light and dark backgrounds) */
a:focus-visible,button:focus-visible,.thm-btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #1f2623!important;outline-offset:3px!important;box-shadow:0 0 0 7px rgba(254,195,17,.85)!important;border-radius:4px}
.ig-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:#fff;color:#1f2623;padding:10px 16px;font-weight:600}
.ig-skip:focus{left:8px;top:8px}

/* Product cards that link to a product page */
a.product-card{display:block;color:inherit;text-decoration:none}
a.product-card:hover h3,a.product-card:focus-visible h3{text-decoration:underline}
.product-card__more{display:block;font-size:13px;font-weight:600;color:#5a5f5c;margin-top:2px}

/* Product page */
.ig-product{padding:40px 0 70px}
.ig-crumbs{font-size:14px;margin-bottom:26px;color:#5a5f5c}
.ig-crumbs a{color:#5a5f5c;text-decoration:underline}
.ig-crumbs [aria-current]{color:#2b2b2b;font-weight:600}
.ig-product h2{font-family:'Rubik',sans-serif;font-size:28px;line-height:1.25;font-weight:500;color:#2b2b2b;margin:0 0 14px}
.ig-product h3{font-family:'Rubik',sans-serif;font-size:19px;font-weight:600;color:#2b2b2b;margin:0 0 8px}
.ig-product p{font-size:16px;line-height:1.7;color:#4b504d}
.ig-product p a,.ig-related a{color:#2b2b2b;text-decoration:underline}
.ig-product__img{border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;margin-bottom:24px}
.ig-product__img img{display:block;width:100%;height:auto}
.ig-product__lead{font-size:18px!important;color:#2b2b2b!important}
.ig-product__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ig-product__btns .thm-btn{font-size:15px;padding:13px 26px}
.ig-product__btns .ig-btn-dark{background-color:#383a39;color:#fff}
.ig-product__block{margin-top:46px}
.ig-varieties{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ig-varieties li{border:1px solid #eee;border-radius:10px;padding:16px 18px;background:#fff}
.ig-varieties strong{display:block;font-size:17px;color:#2b2b2b;margin-bottom:4px}
.ig-varieties span{font-size:15px;line-height:1.55;color:#4b504d}
.ig-pcard{border:1px solid #eee;border-radius:10px;padding:22px 20px;background:#f7f6f1;height:100%;margin-bottom:16px}
.ig-pcard p{font-size:15px;margin:0}
.ig-related{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ig-related a{display:inline-block;border:1px solid #ddd;border-radius:30px;padding:8px 18px;font-size:15px;text-decoration:none;background:#fff}
.ig-related a:hover{border-color:#2b2b2b}
@media(max-width:767px){.ig-product h2{font-size:23px}.ig-product__btns .thm-btn{width:100%;text-align:center}}

/* Contact page: WhatsApp first */
.ig-help{padding:60px 0 50px;background:#f7f6f1}
.ig-help h2,.ig-form-sec h2,.ig-office h2{font-family:'Rubik',sans-serif;font-size:34px;font-weight:500;color:#2b2b2b;margin:0 0 10px;line-height:1.2}
.ig-help__sub{font-size:17px;color:#4b504d;max-width:640px;margin:0 auto 34px}
.ig-wa-card{background:#fff;border:1px solid #e6e6e0;border-radius:14px;padding:32px 26px;text-align:center;height:100%;margin-bottom:20px}
.ig-wa-card h3{font-family:'Rubik',sans-serif;font-size:24px;font-weight:600;color:#2b2b2b;margin:0 0 6px}
.ig-wa-card p{font-size:15.5px;color:#4b504d;margin:0 0 20px}
.ig-wa-btn{display:inline-flex;align-items:center;gap:10px;background:#128c7e;color:#fff!important;font-weight:700;font-size:17px;padding:15px 30px;border-radius:40px;text-decoration:none!important}
.ig-wa-btn:hover{background:#0e7166}
.ig-wa-btn i{font-size:24px}
.ig-help__alt{font-size:15px;color:#4b504d;margin:18px 0 0}
.ig-help__alt a{color:#2b2b2b;text-decoration:underline}
.ig-form-sec{padding:60px 0}
.ig-form-sec--soft{background:#fafafa}
.ig-form-sec .ig-form-sub{font-size:16px;color:#4b504d;margin:0 0 26px}
.ig-form{max-width:820px;margin:0 auto}
.ig-form label{display:block;font-size:14px;font-weight:600;color:#2b2b2b;margin:0 0 6px;text-align:left}
.ig-form input[type=text],.ig-form input[type=email],.ig-form input[type=tel],.ig-form textarea{width:100%;height:52px;border:1px solid #c9c9c4;border-radius:6px;padding:0 16px;margin-bottom:18px;background:#fff;color:#2b2b2b;font-size:16px}
.ig-form textarea{height:140px;padding-top:14px}
.ig-form .thm-btn{font-size:15px;padding:13px 34px;border:0}
.ig-req{color:#b3261e}
.ig-office{padding:50px 0 60px}
.ig-office__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:900px;margin:24px auto 0}
.ig-office__item{border:1px solid #eee;border-radius:10px;padding:22px 20px;text-align:center}
.ig-office__item h3{font-family:'Rubik',sans-serif;font-size:17px;font-weight:600;margin:0 0 8px;color:#2b2b2b}
.ig-office__item p{margin:0;font-size:15.5px;line-height:1.6;color:#4b504d}
.ig-office__item a{color:#2b2b2b;text-decoration:underline}
@media(max-width:767px){.ig-help h2,.ig-form-sec h2,.ig-office h2{font-size:27px}.ig-wa-btn{width:100%;justify-content:center}}

/* Section headings promoted to h2 keep the look of the theme's block titles */
.block-title h2{margin:0;color:var(--thm-black,#2b2b2b);font-family:var(--special-font,'Rubik',sans-serif);font-size:34px;line-height:1.2}
@media(min-width:768px){.block-title h2{font-size:40px}}

/* Photo banners: no empty gap under the header on phones; long titles stay readable over the photo */
.page-header.ig-banner{margin-top:0!important}
@media(max-width:575px){.page-header.ig-banner.ig-banner--light h1{font-size:21px!important;background:rgba(255,255,255,.86);padding:5px 12px;border-radius:6px;display:inline-block}}

/* Inner-page banners start below the header, so the whole photo shows and the title sits in the middle (desktop header is laid over the page) */
@media(min-width:992px){
  body:has(.page-header.ig-banner) .main-header__two{position:relative!important}
}
@supports not selector(:has(*)){
  @media(min-width:992px){.page-header.ig-banner{margin-top:181px!important}}
  @media(min-width:1200px){.page-header.ig-banner{margin-top:230px!important}}
}

/* About banner: new artwork (banner-about-2.webp) carries its title, so swap the photo in and hide the text title visually (kept for search engines and screen readers) */
.page-header__bg[style*="banner-about"]{background-image:url(../images/banner-about-2.webp)!important}
.page-header__bg[style*="banner-about"] ~ .container h1{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;background:none!important}

/* New banner artwork for Products, Careers, Investors and Contact (banner-*-2.webp): the title is part of the picture, so the photo is swapped in, the dark overlay is dropped and the text title is hidden visually (kept for search engines and screen readers). Individual product pages keep the plain banner with the product name. */
.page-header.ig-banner::before{display:none!important}
.page-header__bg[style*="banner-careers"]{background-image:url(../images/banner-careers-2.webp)!important}
.page-header__bg[style*="banner-investors"]{background-image:url(../images/banner-investors-2.webp)!important}
.page-header__bg[style*="banner-contact"]{background-image:url(../images/banner-contact-2.webp)!important}
.page-header.ig-banner:not(:has(+ .ig-product)) .page-header__bg[style*="banner-products"]{background-image:url(../images/banner-products-2.webp)!important}
.page-header__bg[style*="banner-careers"] ~ .container h1,
.page-header__bg[style*="banner-investors"] ~ .container h1,
.page-header__bg[style*="banner-contact"] ~ .container h1,
.page-header.ig-banner:not(:has(+ .ig-product)) .page-header__bg[style*="banner-products"] ~ .container h1{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;background:none!important}