/*
Theme Name: CoreDigify Abra Foods
Theme URI: https://abrafoods.com
Author: CoreDigify
Author URI: https://my.coredigify.com
Description: CDDS design for abrafoods.com (SIA "Positive Foods" — dabīgi saldumi, WooCommerce veikals). The shop's existing Divi look rebuilt 1:1 without a page builder: green promo bar, centered logo + uppercase Inter Tight menu, parallax black-currant hero with the ghost CTA, the white product-banner section with the black rounded button, the five-icon parallax USP band and the black three-column footer. Classic (non-block) theme on purpose — WooCommerce keeps its default template path so Paysera, Omniva and Discount Rules behave exactly as before.
Version: 0.1.11
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coredigify-abrafoods
Tags: e-commerce, custom-menu, custom-logo, translation-ready
*/

/* Fonts are enqueued in functions.php (parallel load + preconnect) instead of a
   render-blocking @import here — an @import only starts downloading after this
   stylesheet itself has arrived, which delays first paint. */

/* ==========================================================================
   Tokens — lifted 1:1 from the Divi build (getComputedStyle on the live site)
   ========================================================================== */
:root{
  --abra-green:#336633;
  --abra-black:#000;
  --abra-ink:#333;
  --abra-body:#666;
  --abra-muted:#999;
  --abra-line:#e5e5e5;
  --abra-field:#eee;
  --abra-select:#ececec;
  --abra-page-bg:#e9e6ed;
  --abra-page-fg:#816f98;

  --f-head:'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --f-body:'Inter', Helvetica, Arial, Lucida, sans-serif;
  --f-nav:'Inter Tight', Helvetica, Arial, Lucida, sans-serif;
  --f-alt:'Roboto', Helvetica, Arial, sans-serif;

  --wrap:1080px;
  --gutter:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.7;
  font-weight:500;
  color:var(--abra-body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);font-weight:500;color:var(--abra-ink);line-height:1}
p{margin:0 0 14px}

.abra-wrap{width:var(--wrap);max-width:calc(100% - 40px);margin-inline:auto}
.abra-row{padding:27px 0}
.abra-section{padding:54px 0}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:100000;width:auto;height:auto;
  clip:auto;clip-path:none;background:#fff;color:#000;padding:10px 16px;
}

/* ==========================================================================
   Header — promo bar + centered logo + menu (fixed on scroll, like Divi)
   ========================================================================== */
.abra-header{position:sticky;top:0;z-index:10010;background:#fff}
.abra-topbar{
  margin:0;
  background:var(--abra-green);
  color:#fff;
  font-family:var(--f-alt);
  font-size:18px;
  font-weight:500;
  line-height:23.8px;
  text-align:center;
  padding:5px;
}
.abra-header__inner{position:relative;padding-top:22px}
.abra-brand{display:block;width:92px;margin-inline:auto}
.abra-brand img{display:block;width:92px;height:54px;object-fit:contain}

.abra-nav{height:76px;display:flex;align-items:center;justify-content:center}
.abra-nav__menu{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.abra-nav__menu li{position:relative}
.abra-nav a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-nav);
  font-size:16px;font-weight:500;line-height:14px;
  text-transform:uppercase;color:#000;
  padding:31px 20px 31px 0;
  transition:opacity .2s;
}
.abra-nav a:hover,.abra-nav .current-menu-item > a{opacity:.7}
.abra-nav__caret{width:9px;height:9px;flex:none;opacity:.9}

.abra-cart{
  display:inline-flex;align-items:center;gap:10px;padding-right:20px;
  font-family:var(--f-nav);font-size:16px;font-weight:500;text-transform:uppercase;color:#000;
}
.abra-cart svg{width:19px;height:19px}
.abra-search-toggle,.abra-burger{
  background:none;border:0;padding:0;cursor:pointer;color:#000;display:inline-flex;
}
.abra-search-toggle svg{width:19px;height:19px}
.abra-burger{display:none}
.abra-burger svg{width:32px;height:32px}

/* Desktop dropdown — Divi geometry (240px, 3px top rule, soft shadow) */
.abra-nav .sub-menu{
  position:absolute;top:100%;left:0;z-index:9999;
  width:240px;margin:0;padding:20px 0;list-style:none;background:#fff;
  border-top:3px solid #000;box-shadow:0 2px 5px rgba(0,0,0,.1);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.abra-nav__menu > li:hover > .sub-menu,
.abra-nav__menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.abra-nav .sub-menu a{display:block;padding:6px 20px;font-size:16px;line-height:28px;font-weight:500}

/* Search drawer */
.abra-searchbar{display:none;padding:0 0 20px}
.abra-searchbar.is-open{display:block}
.abra-searchbar form{display:flex;max-width:520px;margin-inline:auto;gap:10px}
.abra-searchbar input[type=search]{
  flex:1;padding:10px 14px;border:2px solid var(--abra-line);border-radius:3px;
  font-family:var(--f-body);font-size:16px;color:var(--abra-ink);
}

/* Mobile menu panel — Divi geometry */
.abra-mobile-menu{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:9999;
  width:80%;margin:0 auto;padding:19.19px;list-style:none;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.abra-mobile-menu.is-open{display:block}
.abra-mobile-menu ul{margin:0;padding-left:10px;list-style:none}
.abra-mobile-menu a{
  display:block;font-family:var(--f-nav);font-size:16px;line-height:26px;font-weight:500;
  text-transform:uppercase;color:#000;padding:10px 17.28px;
  border-bottom:1px solid rgba(0,0,0,.03);
}
.abra-mobile-menu .menu-item-has-children > a{font-weight:700;background:rgba(0,0,0,.03)}
.abra-mobile-menu .sub-menu a{font-weight:500;background:transparent;padding:10px 15.94px}

/* ==========================================================================
   Buttons — Divi "et_pb_button" geometry (arrow slides in on hover)
   ========================================================================== */
.abra-btn{
  position:relative;display:inline-block;
  font-family:var(--f-body);font-size:20px;font-weight:500;line-height:34px;
  padding:6px 20px;border:2px solid currentColor;border-radius:3px;
  background:transparent;cursor:pointer;
  transition:padding .3s, background-color .3s, color .3s;
}
.abra-btn::after{
  content:'';position:absolute;top:50%;right:20px;
  width:12px;height:12px;margin-top:-6px;opacity:0;
  background:currentColor;
  -webkit-mask:var(--abra-arrow) center/contain no-repeat;
  mask:var(--abra-arrow) center/contain no-repeat;
  transition:opacity .3s, right .3s;
}
.abra-btn:hover{padding-right:40px}
.abra-btn:hover::after{opacity:1;right:14px}
.abra-btn--light{color:#fff;border-color:#fff}
.abra-btn--dark{color:#000;border-color:#000}
.abra-btn--filled{
  color:#fff;background:var(--abra-black);border:2px solid #fff;border-radius:10px;
  padding:6px 14px 6px 40px;
}
/* Cart glyph is a CSS mask, not an inline <svg>, so page content stays plain HTML. */
.abra-btn--filled::before{
  content:'';position:absolute;left:14px;top:50%;margin-top:-9px;width:19px;height:19px;
  background:currentColor;
  -webkit-mask:var(--abra-cart) center/contain no-repeat;
  mask:var(--abra-cart) center/contain no-repeat;
}
.abra-btn--filled::after{display:none}

/* ==========================================================================
   Front page — hero

   wpautop neutraliser: the_content() wraps loose inline children in <p> and
   injects empty <p> between block-level siblings; dissolve those inside the
   front-page sections so the grids and flex rows keep their real children.
   ========================================================================== */
.abra-main--front > p:empty,
.abra-hero__in > p:empty,
.abra-usp__grid > p:empty,
.abra-intro__media > p:empty{display:none}
.abra-usp__grid > p,
.abra-intro__media > p{margin:0;padding:0}

/* The two band backgrounds come from the Customizer via wp_add_inline_style —
   keeping them out of the page content preserves the fixed-attachment parallax. */
.abra-hero{
  position:relative;height:547px;
  background-color:#000;background-position:center top;background-size:cover;
  background-attachment:fixed;background-repeat:no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.abra-hero__in{width:520px;max-width:calc(100% - 40px);text-align:center;padding-bottom:27px}
.abra-hero h1{font-size:45px;line-height:45px;color:#fff;padding-bottom:10px}
.abra-hero p{font-size:20px;line-height:23.8px;font-weight:600;color:#fff;margin:0}
.abra-hero .abra-btn{margin:20px 15px 0 0}

/* Shop-page title band: the same parallax treatment as the front-page hero, but
   sized by its content the way Divi's fullwidth header module was (padding:50px 0). */
.abra-hero--page{height:auto;padding:50px 0}
.abra-hero--page .abra-hero__in{padding-bottom:0}
.abra-hero__scroll{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  width:49px;height:53px;display:flex;align-items:center;justify-content:center;color:#fff;
  animation:abra-bob 1.6s ease-in-out infinite;
}
.abra-hero__scroll::before{
  content:'';width:34px;height:34px;background:currentColor;
  -webkit-mask:var(--abra-chevron) center/contain no-repeat;
  mask:var(--abra-chevron) center/contain no-repeat;
}
@keyframes abra-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* Front page — white intro band */
.abra-intro h2{font-size:26px;line-height:26px;text-align:center;padding-bottom:10px}
.abra-intro__media{text-align:center;padding:23px 0 27px}
.abra-intro__media img{display:block;width:750px;max-width:100%;margin-inline:auto}
.abra-intro__media .abra-btn{margin-top:30px}

/* Front page — parallax USP band */
.abra-usp{
  background-color:#000;background-position:center top;background-size:cover;
  background-attachment:fixed;background-repeat:no-repeat;
}
.abra-usp h2{font-size:37px;line-height:37px;color:#fff;text-align:center;padding-bottom:10px}
.abra-usp__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gutter)}
.abra-usp__item{text-align:center}
.abra-usp__item img{display:block;width:168px;height:168px;margin-inline:auto}
.abra-usp__item h3{font-size:33px;line-height:33px;color:#fff;padding-bottom:10px;margin-top:30px}

/* ==========================================================================
   Content pages
   ========================================================================== */
.abra-page{padding:54px 0}
/* Shop pages open flush with the header: their band is the first thing on the
   page and supplies its own spacing, and each section below brings its own. */
.abra-page--full{padding:0}
.abra-page__title{font-size:37px;line-height:37px;padding-bottom:20px}
.abra-content p{font-size:14px;line-height:23.8px;color:var(--abra-body);padding-bottom:14px;margin:0}
/* wpautop leaves an empty <p> wherever the converted markup has a blank line
   between block elements; each would otherwise add 14px of dead space the Divi
   layout did not have. */
.abra-content p:empty{display:none}
.abra-content h2{font-size:26px;line-height:26px;padding:10px 0}
.abra-content h3{font-size:33px;line-height:33px;padding:10px 0}
.abra-content img{height:auto}
.abra-content ul,.abra-content ol{padding-left:20px;margin:0 0 14px}
.abra-content a{color:var(--abra-ink);text-decoration:underline}

/* The shop-page band lives inside .abra-content, so the body-copy rule above —
   same specificity, declared later — would repaint its subtitle in body grey at
   14px. Restate the band's own type here, where it wins. */
.abra-content .abra-hero p{
  font-size:20px;line-height:23.8px;font-weight:600;color:#fff;margin:0;padding:0;
}

/* ==========================================================================
   Content-page building blocks
   Used by the converted pages (Meistarklases, Kontakti, category landings).
   ========================================================================== */

/* Title band over a photo — the Divi fullwidth header on Meistarklases */
.abra-banner{
  position:relative;min-height:375px;display:flex;align-items:center;justify-content:center;
  background-color:#000;background-position:center;background-size:cover;background-repeat:no-repeat;
  padding:40px 20px;
}
.abra-banner h1{font-size:45px;line-height:45px;color:#fff;text-align:center}

.abra-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start}
.abra-cols--wide-left{grid-template-columns:2fr 1fr}
.abra-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}

.abra-lead{font-size:16px;line-height:26px;color:var(--abra-body)}

/* Icon + text row (Piesakies block) */
.abra-iconrow{display:flex;align-items:center;gap:22px;margin-bottom:28px}
.abra-iconrow__ico{
  flex:none;width:56px;height:56px;border-radius:50%;border:1px solid var(--abra-line);
  display:flex;align-items:center;justify-content:center;
}
.abra-iconrow__ico::before{
  content:'';width:22px;height:22px;background:var(--abra-ink);
  -webkit-mask:var(--abra-icon) center/contain no-repeat;
  mask:var(--abra-icon) center/contain no-repeat;
}
.abra-iconrow--phone .abra-iconrow__ico{--abra-icon:var(--abra-phone)}
.abra-iconrow--mail .abra-iconrow__ico{--abra-icon:var(--abra-mail)}
.abra-iconrow p{margin:0;padding:0}

/* Photo gallery (Meistarklases) */
.abra-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.abra-gallery img{display:block;width:100%;height:auto}

/* Contacts — card floating on the parallax band, then two icon blurbs */
.abra-contact-band{
  background-color:#000;background-position:center top;background-size:cover;
  background-attachment:fixed;background-repeat:no-repeat;padding:80px 0;
}
.abra-card{
  position:relative;width:400px;max-width:100%;margin-inline:auto;text-align:center;
  background:rgba(255,255,255,.14);backdrop-filter:blur(2px);padding:44px 30px 30px;border-radius:6px;
}
.abra-card h2,.abra-card h3{font-size:33px;line-height:33px;color:#fff;padding-bottom:10px}
.abra-card p{color:#fff;font-size:16px;margin:0;padding:8px 0}
.abra-card hr{border:0;border-top:1px solid rgba(255,255,255,.3);margin:6px 0}
.abra-card__ico{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;
}
.abra-card__ico::before{
  content:'';width:18px;height:18px;background:var(--abra-ink);
  -webkit-mask:var(--abra-phone) center/contain no-repeat;
  mask:var(--abra-phone) center/contain no-repeat;
}

.abra-blurbs{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);padding:70px 0}
.abra-blurb{text-align:center}
.abra-blurb--left{text-align:left}
.abra-blurb__ico{
  width:44px;height:44px;border-radius:50%;background:var(--abra-field);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
}
.abra-blurb__ico::before{
  content:'';width:18px;height:18px;background:var(--abra-ink);
  -webkit-mask:var(--abra-icon) center/contain no-repeat;
  mask:var(--abra-icon) center/contain no-repeat;
}
.abra-blurb--case .abra-blurb__ico{--abra-icon:var(--abra-case)}
.abra-blurb--pin .abra-blurb__ico{--abra-icon:var(--abra-pin)}
.abra-blurb h2,.abra-blurb h3{font-size:26px;line-height:26px;padding-bottom:16px}
.abra-blurb p{font-size:14px;line-height:23.8px;color:var(--abra-body);margin:0}

/* Stockist list (Meklē mūsu produkciju) */
.abra-stores{columns:2;column-gap:var(--gutter)}
.abra-stores > div{break-inside:avoid;margin-bottom:28px}
.abra-stores h2,.abra-stores h3{font-size:26px;line-height:26px;padding-bottom:10px}
.abra-stores ul{margin:0;padding:0;list-style:none}
.abra-stores li{position:relative;padding-left:14px;margin-bottom:6px;color:var(--abra-body)}
.abra-stores li::before{
  content:'';position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;
  background:var(--abra-body);
}

@media (max-width:820px){
  .abra-cols,.abra-cols--wide-left,.abra-grid-3,.abra-blurbs{grid-template-columns:1fr}
  .abra-gallery{grid-template-columns:repeat(2,1fr)}
  .abra-stores{columns:1}
  .abra-banner{min-height:240px}
  .abra-banner h1{font-size:34px;line-height:34px}
  .abra-contact-band{background-attachment:scroll}
}

/* ==========================================================================
   WooCommerce — archive grid
   Card 238px wide, 41px gutter, thumb ratio 238/357 (measured on the live shop)
   ========================================================================== */
.woocommerce .abra-wrap,.woocommerce-page .abra-wrap{padding-top:27px;padding-bottom:27px}

.woocommerce .woocommerce-result-count{
  font-size:14px;color:var(--abra-muted);margin:0 0 14px;float:none;
}
.woocommerce .woocommerce-ordering{float:none;margin:0 0 14px}
.woocommerce .woocommerce-ordering select{
  font-family:var(--f-body);font-size:12px;color:var(--abra-body);
  background:var(--abra-select);border:0;border-radius:3px;padding:4px 8px;width:275px;max-width:100%;
}
.abra-shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}

.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:42px 41px;
  margin:0 0 14px;padding:0;list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  width:auto;margin:0;float:none;display:flex;flex-direction:column;
}
.woocommerce ul.products li.product a img{
  width:100%;aspect-ratio:238/357;object-fit:cover;margin:0 0 9px;box-shadow:none;
  transition:transform .4s;
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.03)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--f-alt);font-size:18px;line-height:18px;font-weight:500;color:var(--abra-ink);
  padding:9px 0;margin:0;
}
.woocommerce ul.products li.product .price{
  font-family:var(--f-alt);font-size:14px;line-height:26px;font-weight:400;color:var(--abra-body);
  margin:0;
}
.woocommerce ul.products li.product .price del{opacity:.5}
.woocommerce ul.products li.product .price ins{text-decoration:none;font-weight:500}
.woocommerce ul.products li.product .button{align-self:flex-start;margin-top:20px}
.woocommerce ul.products li.product .onsale{
  position:absolute;top:10px;left:10px;background:var(--abra-black);color:#fff;
  font-family:var(--f-body);font-size:12px;line-height:1;padding:8px 10px;border-radius:3px;margin:0;
}
.woocommerce ul.products li.product{position:relative}

/* Buttons inside WooCommerce use the same ghost geometry as the design */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit{
  position:relative;display:inline-block;
  font-family:var(--f-body);font-size:20px;font-weight:500;line-height:34px;
  padding:6px 20px;border:2px solid #000;border-radius:3px;
  background:transparent;color:#000;text-shadow:none;
  transition:padding .3s, background-color .3s, color .3s;
}
/* WooCommerce ships its own filled style for .alt buttons (add-to-cart, place
   order) later in the cascade — restate the ghost look at matching specificity
   so the shop's buttons stay outlined, as they are today. */
.woocommerce div.product form.cart button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{background-color:transparent;color:#000}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce div.product form.cart button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover{background-color:#000;color:#fff}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled{opacity:.45}

.woocommerce nav.woocommerce-pagination{margin-top:14px}
.woocommerce nav.woocommerce-pagination ul{
  display:flex;justify-content:center;gap:4px;border:0;margin:0;padding:0;
}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:20px;padding:7px;font-size:14px;line-height:14px;text-align:center;
  background:var(--abra-page-bg);color:var(--abra-page-fg);
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--abra-page-fg);color:#fff}

/* Product-category strip above the grid */
/* 30px below matches Divi's module spacing: the strip and the page's heading
   were separate modules stacked in one column, not a single run of text. */
.abra-shop-cats{padding:27px 0 30px}
.abra-shop-cats ul{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin:0;padding:0;list-style:none}
/* text-decoration:none restated here: this strip lives inside .abra-content,
   whose body-copy links are underlined, and it is a navigation, not copy. */
.abra-shop-cats a{font-size:16px;color:var(--abra-ink);text-decoration:none}
.abra-shop-cats a:hover{color:#000;text-decoration:underline}
.abra-shop-cats .current-menu-item > a,
.abra-shop-cats .current-menu-parent > a{color:#000}

/* ==========================================================================
   WooCommerce — single product
   ========================================================================== */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start}
.woocommerce div.product .woocommerce-product-gallery{width:100%;float:none;margin:0}
.woocommerce div.product .woocommerce-product-gallery__wrapper{margin:0;width:100%}
/* WooCommerce sizes gallery images off the (removed) float layout — make the
   featured image fill the column instead of collapsing to its thumbnail size. */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image a{display:block;width:100%}
.woocommerce div.product .woocommerce-product-gallery__image img{width:100%;height:auto}
.woocommerce div.product div.summary{width:100%;float:none;margin:0}
.woocommerce div.product .product_title{
  font-family:var(--f-alt);font-size:30px;line-height:30px;font-weight:500;color:var(--abra-ink);
  padding:0;margin:0;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--f-body);font-size:14px;line-height:23.8px;font-weight:500;color:var(--abra-body);
  margin:10px 0 30px;
}
.woocommerce div.product form.cart{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.woocommerce div.product form.cart div.quantity{margin:0;float:none}
.woocommerce .quantity .qty{
  width:60px;height:56px;padding:16px;background:var(--abra-field);border:0;
  font-family:var(--f-body);font-size:14px;color:var(--abra-muted);text-align:center;
}
.woocommerce div.product .woocommerce-product-details__short-description p,
.woocommerce div.product div.summary p{
  font-size:14px;line-height:23.8px;color:var(--abra-body);padding-bottom:14px;margin:0;
}
.woocommerce div.product .product_meta{font-size:14px;color:var(--abra-muted)}
/* Some descriptions are bulleted ingredient lists. */
.abra-product-desc ul,.abra-product-desc ol{padding-left:20px;margin:0 0 14px}
.abra-product-desc img{height:auto}

/* Related / upsells sit full width under the two columns */
.woocommerce div.product .related,
.woocommerce div.product .upsells{grid-column:1 / -1;padding-top:54px}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2{
  font-family:var(--f-alt);font-size:26px;line-height:26px;font-weight:500;color:var(--abra-ink);
  padding-bottom:16px;
}
.woocommerce div.product .related ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .upsells ul.products li.product .woocommerce-loop-product__title{
  font-size:20px;line-height:20px;padding:10px 0;
}

/* ==========================================================================
   WooCommerce — cart, checkout, account, notices
   (shortcode pages; keep the default markup, restyle only)
   ========================================================================== */
.woocommerce table.shop_table{border-radius:0;border-color:var(--abra-line)}
.woocommerce table.shop_table th{
  font-family:var(--f-nav);font-size:14px;text-transform:uppercase;color:var(--abra-ink);
}
.woocommerce table.shop_table td{color:var(--abra-body)}
.woocommerce-cart table.cart img{width:64px}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3,
.woocommerce-account h2{
  font-family:var(--f-head);font-size:28px;line-height:28px;font-weight:400;
  text-transform:uppercase;color:var(--abra-ink);padding-bottom:10px;
}
.woocommerce form .form-row label{font-size:14px;color:var(--abra-ink)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  padding:10px 12px;border:1px solid var(--abra-line);border-radius:3px;
  font-family:var(--f-body);font-size:14px;color:var(--abra-ink);background:#fff;height:auto;
}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--abra-green);font-size:14px;
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--abra-green)}
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment{background:#f7f7f7;border-radius:3px}

/* ==========================================================================
   Footer
   ========================================================================== */
.abra-footer{background:var(--abra-black);color:#fff}
.abra-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);padding:65px 0 61px}
.abra-footer h3,.abra-footer h4{
  font-size:28px;line-height:28px;font-weight:400;color:#fff;
  text-transform:uppercase;padding-bottom:10px;
}
.abra-footer p{color:#fff;padding-bottom:14px;margin:0}
.abra-footer ul{margin:0;padding:0;list-style:none}
.abra-footer li{position:relative;padding-left:14px;color:#fff;margin-bottom:6px}
.abra-footer li::before{content:'';position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:#fff}
.abra-footer li a:hover{text-decoration:underline}
.abra-footer__bottom{background:rgba(0,0,0,.32);padding:15px 0 5px}
.abra-footer__bottom .abra-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.abra-footer__bottom,.abra-footer__bottom a{color:#fff;font-size:14px}
.abra-footer__bottom a{font-weight:700}
.abra-footer__social{display:flex;gap:18px}
.abra-footer__social svg{width:18px;height:18px;fill:#fff;opacity:.9}
.abra-footer__social a:hover svg{opacity:1}

/* ==========================================================================
   Responsive — Divi switches to the mobile menu at 980px
   ========================================================================== */
@media (max-width:1024px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,1fr)}
  .abra-usp__grid{grid-template-columns:repeat(3,1fr);gap:40px}
}
@media (max-width:980px){
  .abra-header{position:relative}
  .abra-nav__menu,.abra-nav__caret{display:none}
  .abra-nav{height:32px}
  .abra-burger{display:inline-flex}
  .abra-cart{padding-right:30px}
  .abra-search-toggle{margin-right:30px}
}
@media (max-width:820px){
  .abra-hero{background-attachment:scroll;height:auto;padding:90px 0}
  .abra-usp{background-attachment:scroll}
  .woocommerce div.product{grid-template-columns:1fr}
  .abra-footer__cols{grid-template-columns:1fr}
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .abra-usp__grid{grid-template-columns:repeat(2,1fr)}
  .abra-footer__bottom .abra-wrap{flex-direction:column;text-align:center}
  .abra-shop-toolbar{flex-direction:column;align-items:stretch}
  .woocommerce .woocommerce-ordering select{width:100%}
}