/* GradeGuard — corrections layered over the main child stylesheet. */

/* The Cart block's shipping caveat is replaced by gg-polish.php with a true
   one. Hide the original outright rather than overpainting it, so a screen
   reader is not told two different things. */
.wc-block-components-totals-footer-item-shipping{ display:none !important; }

.gg-cart-delivery{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:8px;
  background:var(--gg-brand-soft,#E6F0EC);
  color:var(--gg-ink,#16211D);
  font-size:13px;
  line-height:1.55;
}
.gg-cart-delivery strong{ font-weight:700; }

/* Empty cart. The default is a frowning face and a product grid whose buttons
   say "Add to cart" — the one label this store does not use. */
.gg-empty-cart{ padding:32px 0 8px; max-width:640px; }
.gg-empty-cart__title{ font-size:clamp(22px,4vw,30px); letter-spacing:-0.02em; margin:0 0 10px; }
.gg-empty-cart__lede{ color:var(--gg-secondary,#55665F); font-size:15px; line-height:1.65; margin:0 0 22px; }
.gg-empty-cart__buttons{ gap:10px; }
.gg-empty-cart__aside{ margin-top:22px; font-size:13.5px; color:var(--gg-muted,#5F706A); }
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{ display:none; }

/* Reassurance strip under the cart. It sits here rather than inside the Cart
   block because that block is rendered client-side and rewrites its own
   subtree on hydration — anything injected into it disappears. */
.gg-cart-reassure{
  margin-top:36px;
  padding:24px 0 8px;
  border-top:1px solid var(--gg-line,#E2E7E4);
}
.gg-cart-reassure p{ margin:0; font-size:13px; line-height:1.6; color:var(--gg-secondary,#55665F); }
.gg-cart-reassure strong{ display:block; color:var(--gg-ink,#16211D); font-size:13.5px; margin-bottom:3px; }
@media (max-width:781px){
  .gg-cart-reassure__cols{ gap:18px !important; }
}

/* Dispatch details, shown on the account order view and on the tracking page. */
.gg-dispatch{
  margin:28px 0;
  padding:20px 22px;
  border:1px solid var(--gg-line,#E2E7E4);
  border-left:3px solid var(--gg-verified,#0B7A56);
  border-radius:8px;
  background:var(--gg-surface,#fff);
}
.gg-dispatch h2{ font-size:17px; margin:0 0 14px; letter-spacing:-0.015em; }
.gg-dispatch dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 18px; }
.gg-dispatch dt{
  font-family:var(--gg-mono,ui-monospace,"IBM Plex Mono",monospace);
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gg-muted,#5F706A); padding-top:2px;
}
.gg-dispatch dd{ margin:0; font-size:14.5px; color:var(--gg-ink,#16211D); }
.gg-dispatch dd code{
  font-family:var(--gg-mono,ui-monospace,"IBM Plex Mono",monospace);
  font-size:14px; background:var(--gg-surface-2,#EEF1EF); padding:2px 7px; border-radius:4px;
}
.gg-dispatch__note{ margin:14px 0 0; font-size:13px; line-height:1.6; color:var(--gg-secondary,#55665F); }
@media (max-width:600px){
  .gg-dispatch dl{ grid-template-columns:1fr; gap:2px 0; }
  .gg-dispatch dd{ margin-bottom:10px; }
}

/* ---------------------------------------------------------------------------
   Measure vs. alignment.

   style.css caps body copy at 68ch, which is right — nobody reads a 1220px
   line. But the page container here is full-bleed, and WordPress's constrained
   layout puts `margin-inline: auto !important` on every child, so a 68ch
   paragraph is centred in 1905px instead of sitting at the left edge of the
   1220px column. The headings, which are wider, land at the column edge. Body
   copy therefore starts roughly 190px to the right of the heading above it,
   and the indent changes with every paragraph's own width.

   Keep the measure. Replace the centring with the column's own left offset,
   computed the way Blocksy computes it: min(content-size, 92vw).
   ------------------------------------------------------------------------ */
/* …and a full-bleed section band is not body copy, so it is excluded here and
   positioned by the PAGE SECTION BANDS rule at the foot of this file instead. */
.entry-content.is-layout-constrained > *:not(.alignfull):not(.alignwide):not(.aligncenter):not(.has-text-align-center):not(.has-text-align-right):not(.gg-hero):not(.gg-cats):not(.gg-stock):not(.gg-row):not(.gg-grades):not(.gg-shop):not(.gg-sell):not(.gg-guides){
  margin-inline-start:calc(
    (100% - min(var(--wp--style--global--content-size, 1220px),
                var(--theme-container-edge-spacing, 92vw))) / 2
  ) !important;
  margin-inline-end:auto !important;
}

/* Same collision one level down: a group that is already inside the column is
   itself a constrained layout, so any child with its own max-width — the hero
   H1 at 600px, a section lede — gets auto-centred inside it while the eyebrow
   and the buttons beside it stay flush left. Here the container IS the column,
   so the offset is simply zero. */
.entry-content .is-layout-constrained > *:not(.alignfull):not(.alignwide):not(.aligncenter):not(.has-text-align-center):not(.has-text-align-right){
  margin-inline-start:0 !important;
  margin-inline-end:auto !important;
}
/* …but a group that asked to centre its own contents keeps doing so. */
.entry-content .is-content-justification-center > *,
.entry-content .has-text-align-center .is-layout-constrained > *{
  margin-inline:auto !important;
}

/* ---------------------------------------------------------------------------
   Hero: text on the left, one real unit on the right.
   ------------------------------------------------------------------------ */
.gg-hero{ padding-block:clamp(36px,6vw,84px) clamp(28px,4vw,56px); }

@media (min-width:900px){
  .gg-hero{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,0.92fr);
    gap:clamp(32px,4vw,64px);
    align-items:start;
  }
  .gg-hero > *{ margin-block:0 !important; }
}

.gg-hero__aside{ margin-top:36px; }
@media (min-width:900px){ .gg-hero__aside{ margin-top:0; } }

.gg-herocard{
  border:1px solid var(--gg-line,#E2E7E4);
  border-radius:14px;
  background:var(--gg-surface,#fff);
  padding:20px 20px 22px;
  box-shadow:0 1px 2px rgba(22,33,29,.04), 0 12px 32px -18px rgba(22,33,29,.28);
}
.gg-herocard__kicker{
  font-family:var(--gg-mono,ui-monospace,"IBM Plex Mono",monospace);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gg-verified,#0B7A56); margin:0 0 14px;
}
.gg-herocard__media{
  display:block; border-radius:10px; overflow:hidden;
  background:var(--gg-surface-2,#EEF1EF);
  aspect-ratio:16/10;
}
.gg-herocard__media img{ display:block; width:100%; height:100%; object-fit:contain; }
.gg-herocard__name{ font-size:16px; line-height:1.35; letter-spacing:-.015em; margin:14px 0 12px; }
.gg-herocard__name a{ color:var(--gg-ink,#16211D); text-decoration:none; }
.gg-herocard__name a:hover{ color:var(--gg-brand,#0B5C48); }

.gg-herocard__data{ margin:0; border-top:1px solid var(--gg-line,#E2E7E4); }
.gg-herocard__data dt,
.gg-herocard__data dd{ padding:6px 0; margin:0; font-size:12.5px; }
.gg-herocard__data{ display:grid; grid-template-columns:1fr auto; }
.gg-herocard__data dt{ color:var(--gg-muted,#5F706A); border-bottom:1px solid var(--gg-line,#E2E7E4); }
.gg-herocard__data dd{
  font-family:var(--gg-mono,ui-monospace,"IBM Plex Mono",monospace);
  color:var(--gg-ink,#16211D); text-align:right;
  border-bottom:1px solid var(--gg-line,#E2E7E4);
}
.gg-herocard__data dt:last-of-type,
.gg-herocard__data dd:last-of-type{ border-bottom:0; }

.gg-herocard__price{
  margin:16px 0 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-family:var(--gg-mono,ui-monospace,"IBM Plex Mono",monospace);
  font-size:21px; font-weight:600; color:var(--gg-ink,#16211D);
}
.gg-herocard__price span{
  font-family:inherit; font-size:11px; font-weight:400; letter-spacing:.02em;
  color:var(--gg-muted,#5F706A);
}
.gg-herocard__cta{ margin:16px 0 0; }
.gg-herocard__cta a{
  display:block; text-align:center; padding:13px 18px; border-radius:8px;
  background:var(--gg-cta,#E2701A); color:var(--gg-cta-ink,#16211D);
  font-weight:700; font-size:14.5px; text-decoration:none;
}
.gg-herocard__cta a:hover{ filter:brightness(.95); color:var(--gg-cta-ink,#16211D); }

/* Guides index. Blocksy's card puts the meta and the title above the image;
   on an archive the image is the thing the eye lands on first, so it leads. */
.gg-guides-h1{ margin-bottom:.5em; }
.entries .entry-card{ display:flex; flex-direction:column; }
.entries .entry-card > .ct-media-container{ order:-1; margin-bottom:14px; }

/* The guide covers are typographic: the words are part of the image, so a
   square crop cuts the first letter off every line. Match the card's ratio to
   the artwork's instead of cropping to fit. */
.entries .entry-card .ct-media-container{
  aspect-ratio:16/9 !important;
  height:auto !important;
  padding-bottom:0 !important;
  border-radius:8px;
  overflow:hidden;
}
.entries .entry-card .ct-media-container img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}

/* The header row is `grid-template-columns: 1fr var(--middle-column-width,auto) 1fr`, and
   Blocksy derives that middle track from the search item's own width setting:
   `[data-middle="search-input"]{ --middle-column-width: var(--search-box-max-width, 25%) }`.
   That setting was 100%, so the middle track took the whole 1220px row and BOTH 1fr side tracks
   computed to 0px — the logo and the Track order / account / cart cluster were overflowing tracks
   with no width, and the middle column's full-row box painted over the logo and swallowed its
   clicks. Fixed at source in the header_placements theme mod (36% desktop / 44% tablet / 100%
   mobile), so no CSS override is needed here.
   ------------------------------------------------------------------------ */


/* ===========================================================================
   PAGE SECTION BANDS

   Every landing section is a wp-block-group with its own background and
   `padding: Npx 0`. WordPress's constrained layout then caps the group at the
   1220px content width and centres it — so each coloured band rendered as a
   1220px box floating in a 1905px page, with:

     · its text jammed flat against both edges of the band (padding-inline: 0)
     · a 23px white gap above and below, so the bands never met
     · a different vertical padding in each section (84/56, 0/44, 44/44, 40/40)

   The dark grades panel made all three obvious at once: "THE GRADEGUARD SCALE"
   touching the left edge and the battery column touching the right.

   A band should be full-bleed and its CONTENT should sit on the column. That
   is one rule instead of seven patches, and it puts every heading, paragraph
   and table on the site's single left edge.
   ======================================================================== */
:root{ --gg-band-inset:clamp(20px, 4vw, 40px); }

.entry-content > .gg-hero,
.entry-content > .gg-cats,
.entry-content > .gg-stock,
.entry-content > .gg-row,
.entry-content > .gg-grades,
.entry-content > .gg-shop,
.entry-content > .gg-sell,
.entry-content > .gg-guides{
  /* Blocksy also sets an explicit `width: var(--theme-block-width)` (92vw) on
     constrained children, so max-width alone leaves the band 139px short of
     the viewport on each side. */
  width:auto !important;
  max-width:none !important;
  margin-inline:0 !important;
  margin-block:0 !important;                 /* bands meet; no accidental white gaps */
  padding-inline:max(
    var(--gg-band-inset),
    calc((100% - var(--wp--style--global--content-size, 1220px)) / 2)
  ) !important;
  padding-block:clamp(36px, 4.6vw, 60px);    /* one rhythm for every band */
}

/* The hero opens the page, so it carries more air above than the bands below. */
.entry-content > .gg-hero{
  padding-block:clamp(44px, 6vw, 84px) clamp(36px, 4.6vw, 60px);
}
/* The category cards belong to the hero, not to the band under them. */
.entry-content > .gg-cats{
  padding-block:0 clamp(36px, 4.6vw, 60px);
}
/* Last band on the page — a little more room before the footer. */
.entry-content > .gg-guides{
  padding-block:clamp(36px, 4.6vw, 60px) clamp(48px, 5.4vw, 72px);
}

/* ---------------------------------------------------------------------------
   Eyebrow → heading.

   WordPress's constrained layout gives every child `margin-block-start:
   var(--theme-content-spacing)` (65px here), and Blocksy's reset zeroes that
   again for everything EXCEPT headings. So a heading always opens with 65px
   above it — correct between a paragraph and the next section heading, and
   wrong directly under an eyebrow, which is a label belonging to that heading.
   In the grades panel it left a 79px hole between "THE GRADEGUARD SCALE" and
   "Four grades."
   ------------------------------------------------------------------------ */
.gg-eyebrow + :is(h1, h2, h3, h4),
.gg-eyebrow + .wp-block-heading{
  margin-block-start:6px !important;
}

/* ===========================================================================
   MOBILE BOTTOM BAR
   Shown only where the header has collapsed to its mobile row (Blocksy's
   breakpoint is 1000px). Hidden for everyone above that.
   ======================================================================== */
.gg-mbar{ display:none; }
.gg-msearch{ display:none; }

@media (max-width:999.98px){
  .gg-mbar{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    position:fixed; inset:auto 0 0 0; z-index:998;
    background:var(--gg-surface,#fff);
    border-top:1px solid var(--gg-line,#E2E7E4);
    box-shadow:0 -2px 18px -10px rgba(22,33,29,.4);
    padding-bottom:env(safe-area-inset-bottom, 0px);   /* iPhone home indicator */
  }
  .gg-mbar__item{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:9px 2px 8px; min-height:56px;
    color:var(--gg-muted,#5F706A); text-decoration:none;
    font-size:10.5px; letter-spacing:.01em; line-height:1;
    -webkit-tap-highlight-color:transparent;
  }
  .gg-mbar__item:hover,
  .gg-mbar__item:focus-visible{ color:var(--gg-brand,#0B5C48); }
  .gg-mbar__item.is-current{ color:var(--gg-brand,#0B5C48); font-weight:600; }
  /* The active marker rides the top edge of the tab. Under the icon it sat on
     top of the label. */
  .gg-mbar__item{ position:relative; }
  .gg-mbar__item.is-current::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:26px; height:2px; border-radius:0 0 2px 2px;
    background:var(--gg-brand,#0B5C48);
  }
  .gg-mbar__icon{ position:relative; display:block; width:23px; height:23px; }
  .gg-mbar__icon svg{ width:23px; height:23px; display:block; }
  .gg-mbar__count{
    position:absolute; top:-5px; right:-8px; min-width:16px; height:16px;
    padding:0 4px; border-radius:9px;
    background:var(--gg-cta,#E2701A); color:var(--gg-cta-ink,#16211D);
    font-size:10px; font-weight:700; line-height:16px; text-align:center;
  }

  /* Content must not end underneath the bar. */
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* Search sheet */
  .gg-msearch{
    display:flex; align-items:center; gap:8px;
    position:fixed; inset:auto 0 0 0; z-index:999;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background:var(--gg-surface,#fff);
    border-top:1px solid var(--gg-line,#E2E7E4);
    box-shadow:0 -6px 26px -12px rgba(22,33,29,.5);
  }
  .gg-msearch[hidden]{ display:none; }
  .gg-msearch__form{ display:flex; gap:8px; flex:1 1 auto; min-width:0; }
  .gg-msearch__form input[type="search"]{
    flex:1 1 auto; min-width:0; height:44px; padding:0 12px;
    border:1px solid var(--gg-line,#E2E7E4); border-radius:8px;
    font-size:16px;                       /* under 16px and iOS zooms the page */
    background:var(--gg-paper,#F3F5F4); color:var(--gg-ink,#16211D);
  }
  .gg-msearch__form button{
    height:44px; padding:0 16px; border:0; border-radius:8px;
    background:var(--gg-brand,#0B5C48); color:#fff; font-weight:600; font-size:14px;
  }
  .gg-msearch__close{
    width:34px; height:34px; border:0; border-radius:8px; flex:0 0 auto;
    background:transparent; color:var(--gg-muted,#5F706A); font-size:26px; line-height:1;
  }
  body.gg-msearch-open .gg-mbar{ display:none; }
}

@media print{ .gg-mbar, .gg-msearch{ display:none !important; } }

/* ===========================================================================
   PRODUCT CARD IMAGES — fit, never crop.

   Two separate things were cutting the photographs:

   1. WooCommerce was generating woocommerce_thumbnail as a HARD 300x300 crop,
      so 9 portrait images (a 472x879 phone shot, for example) lost their top
      and bottom before CSS ever saw them. Fixed at source by switching
      thumbnail cropping to "uncropped" and regenerating.

   2. style.css put aspect-ratio 1/1 on the card's media container, but Blocksy
      puts 4/3 on the <img> inside it, so the image was laid out in a 288x216
      box inside a 288x288 container — neither filling it nor matching it.

   The container keeps the square so every card is the same height and the grid
   stays even; the image inside is free to be any shape and is contained, so a
   tall phone letterboxes against the card rather than being trimmed.
   ======================================================================== */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .ct-image-container{
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  height:auto !important;
  overflow:hidden;
  border-radius:8px;
  background:var(--gg-surface-2, #EEF1EF);
  padding:10px;
  box-sizing:border-box;
}

.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product .ct-media-container picture,
.woocommerce ul.products li.product .ct-image-container img{
  aspect-ratio:auto !important;     /* let the file's own ratio through */
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  --theme-object-fit:contain;
  background:transparent;
}

/* The related-products and cross-sell rows use the same card markup. */
.woocommerce .related ul.products li.product .ct-media-container,
.woocommerce .up-sells ul.products li.product .ct-media-container{
  aspect-ratio:1 / 1 !important;
}

/* ===========================================================================
   PRODUCT GALLERY THUMBNAILS — one scrolling row, not a wrapped grid.

   Blocksy's flexy pills wrap by default, so a product with six photographs
   broke into two rows of thumbnails. On a 390px phone that pushed the title,
   the price and the condition block — the things someone came to read — most
   of a screen further down.

   Blocksy exposes its own variables for this (--pills-wrap, --thumbs-width),
   so they are set rather than overridden: Blocksy's rules are in stylesheets
   that load AFTER this file, and an !important war with them would be lost
   the next time the pro plugin moves a selector.

   The thumbnail size is chosen so the next one always peeks past the edge,
   which is the only honest signal that there is more to swipe.
   ======================================================================== */
.flexy-pills{ --pills-wrap:nowrap; }

/* Blocksy declares --thumbs-width ON THE <li> inside its own media queries
   (33.333% under 480px, 25% to 690px), so setting it on an ancestor never
   reaches it — the element's own declaration wins. It is set on the same
   element here, at a higher specificity, from a stylesheet that loads later. */
.flexy-pills > ol > li{ --thumbs-width:clamp(64px, 18vw, 82px); }
@media (min-width:1000px){
  .flexy-pills > ol > li{ --thumbs-width:86px; }
}

.flexy-pills > ol{
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  gap:8px;
  padding:2px 0 8px;
  scrollbar-width:thin;
  scrollbar-color:var(--gg-line,#E2E7E4) transparent;
}
.flexy-pills > ol > li{
  scroll-snap-align:start;
  margin:0 !important;
  aspect-ratio:1 / 1;
  height:auto;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--gg-line,#E2E7E4);
  background:var(--gg-surface-2,#EEF1EF);
  transition:border-color .15s;
}
.flexy-pills > ol > li.active{
  border-color:var(--gg-brand,#0B5C48);
  border-width:2px;
}
.flexy-pills > ol > li img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block;
}

/* A thin, quiet scrollbar rather than the browser's default slab. */
.flexy-pills > ol::-webkit-scrollbar{ height:4px; }
.flexy-pills > ol::-webkit-scrollbar-track{ background:transparent; }
.flexy-pills > ol::-webkit-scrollbar-thumb{
  background:var(--gg-line,#E2E7E4);
  border-radius:4px;
}
.flexy-pills > ol:hover::-webkit-scrollbar-thumb{ background:var(--gg-muted-2,#66776F); }

/* ---------------------------------------------------------------------------
   Category product rows.

   One "latest 8" row showed 8 of 42 products and never a laptop. Three rows —
   mobiles first — put each line in front of the visitor with a sentence saying
   what is actually checked on it, and a way through to the full archive.
   ------------------------------------------------------------------------ */
.gg-row--mobiles{ background:var(--gg-paper, #F3F5F4); }
.gg-row--laptops{ background:var(--gg-surface, #fff); }
.gg-row--desktops{ background:var(--gg-paper, #F3F5F4); }

.gg-row__lede{
  max-width:66ch;
  margin:0 0 26px !important;
  font-size:14.5px;
  line-height:1.6;
  color:var(--gg-secondary,#55665F);
}
.gg-row__more{
  margin:26px 0 0 !important;
  font-size:14px;
}
.gg-row__more a{
  color:var(--gg-brand,#0B5C48);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(11,92,72,.3);
  padding-bottom:2px;
}
.gg-row__more a:hover{ border-bottom-color:var(--gg-brand,#0B5C48); }

/* The grade table sits between mobiles and laptops, so the band above it and
   the band below it must not both be paper — otherwise the dark panel looks
   like it is floating rather than dividing. */
.gg-row + .gg-grades{ margin-top:0; }

/* Grade table without the battery column: the last cell is now the cosmetic
   description, so it takes the body cell style instead of the right-aligned
   monospace one that was written for the removed battery figures. */
.gg-grade-table td:last-child:not(:first-child){font-family:inherit;color:#C9D6D1;text-align:left;white-space:normal}

/* =========================================================================
   Checkout steps: Cart → Protect → Address → Review & confirm
   ====================================================================== */
.gg-steps{max-width:760px;margin:0 0 28px}
.gg-steps ol{display:flex;gap:6px;list-style:none;margin:0;padding:0;counter-reset:none}
.gg-steps__i{flex:1;min-width:0}
.gg-steps__i > a,.gg-steps__i > span:first-child{display:block}
.gg-steps__i a,.gg-steps__i{color:var(--gg-muted);text-decoration:none}
.gg-steps__i{position:relative;padding-top:12px;border-top:3px solid var(--gg-line-2,#D6DCD9);font-size:13px;line-height:1.3}
.gg-steps__i.is-done{border-top-color:var(--gg-verified,#0B7A56)}
.gg-steps__i.is-current{border-top-color:var(--gg-brand,#0B5C48);color:var(--gg-ink,#16211D);font-weight:600}
.gg-steps__i.is-done a{color:var(--gg-verified,#0B7A56)}
.gg-steps__i.is-done a:hover .gg-steps__t{text-decoration:underline}
.gg-steps__n{font-family:var(--gg-font-mono);font-size:11px;margin-right:6px;opacity:.8}
@media (max-width:560px){.gg-steps__t{display:block;font-size:12px}.gg-steps__n{display:block;margin:0 0 2px}}

.gg-step{max-width:760px}
.gg-step__lede{color:var(--gg-body,#2B3833);font-size:15px;line-height:1.6;margin:0 0 22px}
.gg-step__error{background:#FBEDEB;color:var(--gg-alert,#A82A1E);border:1px solid #F0C9C4;border-radius:8px;padding:10px 14px;margin:0 0 18px;font-size:14px}

.gg-protect__device,.gg-protect__acc{background:var(--gg-surface,#fff);border:1px solid var(--gg-line,#E2E7E4);border-radius:12px;padding:18px;margin:0 0 16px}
.gg-protect__head{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.gg-protect__head img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:var(--gg-paper,#F3F5F4)}
.gg-protect__kicker{font-family:var(--gg-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gg-verified,#0B7A56);margin:0 0 2px}
.gg-protect__name,.gg-protect__h{font-size:17px;line-height:1.3;margin:0;color:var(--gg-ink,#16211D)}
.gg-protect__h{margin:0 0 12px}

.gg-tile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px;border:1.5px solid var(--gg-line-2,#D6DCD9);border-radius:10px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.gg-tile + .gg-tile{margin-top:10px}
.gg-tile--img{grid-template-columns:auto auto 1fr auto}
.gg-tile:hover{border-color:var(--gg-brand,#0B5C48)}
.gg-tile:has(input:checked){border-color:var(--gg-brand,#0B5C48);background:var(--gg-brand-soft,#E6F0EC)}
.gg-tile input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--gg-brand,#0B5C48)}
.gg-tile img{width:48px;height:48px;object-fit:contain;border-radius:8px;background:var(--gg-paper,#F3F5F4)}
.gg-tile__body{display:block;min-width:0}
.gg-tile__title{display:block;font-weight:600;color:var(--gg-ink,#16211D);font-size:15px}
.gg-tile__text{display:block;color:var(--gg-muted,#5F706A);font-size:13px;line-height:1.5;margin-top:2px}
.gg-tile__text a{color:var(--gg-brand,#0B5C48);text-decoration:underline}
.gg-tile__price{font-family:var(--gg-font-mono);font-weight:600;color:var(--gg-ink,#16211D);white-space:nowrap}
.gg-tile__price small{font-weight:400;color:var(--gg-muted,#5F706A)}
@media (max-width:560px){
  .gg-tile,.gg-tile--img{grid-template-columns:auto 1fr;row-gap:6px}
  .gg-tile img{display:none}
  .gg-tile__price{grid-column:2}
}

.gg-step__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:22px 0 8px}
.gg-step__next{min-height:50px;padding:0 28px;font-size:16px}
.gg-step__skip,.gg-step__back{background:none;border:0;padding:6px 0;color:var(--gg-muted,#5F706A);font-size:14px;text-decoration:underline;cursor:pointer}
.gg-step__skip:hover,.gg-step__back:hover{color:var(--gg-ink,#16211D)}
@media (max-width:560px){.gg-step__next{width:100%}}

.gg-address__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.gg-field{margin:0 0 12px}
.gg-field--email,.gg-field--address_1,.gg-field--address_2{grid-column:1/-1}
.gg-field label{display:block;font-size:13px;font-weight:600;color:var(--gg-ink,#16211D);margin:0 0 5px}
.gg-field label span{color:var(--gg-alert,#A82A1E)}
.gg-field input,.gg-field select{width:100%;min-height:46px;padding:10px 12px;font-size:16px;border:1.5px solid var(--gg-line-3,#C3CDC8);border-radius:8px;background:#fff;color:var(--gg-ink,#16211D);box-sizing:border-box}
.gg-field input:focus,.gg-field select:focus{outline:0;border-color:var(--gg-brand,#0B5C48);box-shadow:0 0 0 3px rgba(11,92,72,.15)}
.gg-field.has-error input,.gg-field.has-error select{border-color:var(--gg-alert,#A82A1E)}
.gg-field__err{display:block;color:var(--gg-alert,#A82A1E);font-size:13px;margin-top:4px}
@media (max-width:560px){.gg-address__grid{grid-template-columns:1fr}}
.gg-step__next{display:inline-flex;align-items:center;justify-content:center;background:var(--gg-cta,#E2701A);color:var(--gg-cta-ink,#16211D);border:1.5px solid var(--gg-cta,#E2701A);border-radius:6px;font-weight:600;cursor:pointer;text-decoration:none}
.gg-step__next:hover{background:#C9620F;border-color:#C9620F;color:var(--gg-cta-ink,#16211D)}
.gg-step__next:focus-visible{outline:3px solid var(--gg-brand,#0B5C48);outline-offset:2px}
/* .entry-content h2 (margin-top:2.25em) outranks a single class; the step cards set their own rhythm. */
.entry-content .gg-step .gg-protect__name{margin:0}
.entry-content .gg-step .gg-protect__h{margin:0 0 12px}

/* =========================================================================
   Coupons · Free delivery + COD · My Orders · Order details · Order placed
   (markup: mu-plugins/gg-orders-ui.php, theme woocommerce/checkout/thankyou.php)
   ====================================================================== */
.gg-hi{font-weight:500;color:inherit;opacity:.85}
.gg-card{background:var(--gg-surface,#fff);border:1px solid var(--gg-line,#E2E7E4);border-radius:14px;padding:20px}
.gg-od-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:var(--gg-cta,#E2701A);color:var(--gg-cta-ink,#16211D)!important;border:1.5px solid var(--gg-cta,#E2701A);border-radius:8px;font-weight:700;text-decoration:none!important;cursor:pointer}
.gg-od-btn:hover{background:#C9620F;border-color:#C9620F}
.gg-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--gg-brand-soft,#E6F0EC);color:var(--gg-brand,#0B5C48);font-size:12px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.gg-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.gg-pill.is-problem{background:#FBEDEB;color:var(--gg-alert,#A82A1E)}
.gg-pill.is-lg{font-size:15px;padding:6px 14px}

/* ---- Free delivery + COD ---- */
.gg-perks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 18px}
.gg-perks__i{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--gg-brand-soft,#E6F0EC);border:1px solid #CFE3DA;color:var(--gg-ink,#16211D)}
.gg-perks__ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--gg-brand,#0B5C48);color:#fff}
.gg-perks__i strong{display:block;font-size:15px;font-weight:800;color:var(--gg-brand,#0B5C48);letter-spacing:.01em}
.gg-perks__i small{display:block;font-size:12.5px;color:var(--gg-body,#2B3833);margin-top:1px}
@media (max-width:420px){.gg-perks{grid-template-columns:1fr}}
.gg-card-perks{display:flex;flex-wrap:wrap;gap:6px;margin:6px var(--gg-3,12px) 8px;padding:0}
.gg-card-perks span{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 5px;border-radius:999px;background:var(--gg-brand-soft,#E6F0EC);color:var(--gg-brand,#0B5C48);font-size:11.5px;font-weight:700}
.gg-card-perks svg{width:15px;height:15px}
.gg-pstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;max-width:760px;margin:0 0 18px;padding:10px 16px;border-radius:12px;background:var(--gg-brand,#0B5C48);color:#fff}
.gg-pstrip span{display:inline-flex;align-items:center;gap:7px;font-size:15px}
.gg-pstrip strong{font-weight:800;letter-spacing:.01em}
.gg-pstrip svg{width:24px;height:24px}
.gg-pstrip__x{font-size:13px!important;opacity:.9}
@media (max-width:560px){.gg-pstrip{gap:6px 14px;padding:9px 12px}.gg-pstrip span{font-size:14px}.gg-pstrip__x{flex-basis:100%}}

/* ---- Ad slots: hold their space whether or not an ad is served ----
   An unfilled AdSense unit collapses to zero the moment the script runs, and
   everything under it jumps up the page. That single behaviour was worth a
   1.02 CLS on mobile — the worst score on the whole report. Reserving the box
   costs nothing when an ad does arrive, and costs nothing visually when it
   does not, because the label sits in the reserved space. */
.gg-adslot{height:280px;display:flex;align-items:center;justify-content:center;
  background:var(--gg-surface-2);border-radius:var(--gg-r-ctl)}
.gg-adslot .adsbygoogle{display:block;width:100%;height:280px}
@media (min-width:1000px){.gg-adslot,.gg-adslot .adsbygoogle{height:250px}}
/* the "Advertisement" label the ad block prints above each unit */
center{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gg-muted-2);margin:28px 0 6px}

/* ---- Home: close the dead band under the menu ----
   Two paddings stacked up to ~140px of white space above the headline: the
   theme's content wrapper (56px) and the hero block (84px, after the block
   editor's own spacing was added on top of the 44px in style.css). The hero
   is the first thing a visitor should see, not the gap above it. */
body.home .ct-container-full,
body.home .ct-container{padding-top:16px}
body.home .gg-hero{padding-top:24px}
@media (max-width:599.98px){
  body.home .ct-container-full,
  body.home .ct-container{padding-top:8px}
  body.home .gg-hero{padding-top:12px}
}