/* ============================================================
   STORE — classes added for the standalone (non-WordPress) store.
   Everything else comes from style.css + theme.css.
   ============================================================ */

.gf-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.gf-t-title { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
.gf-panel + .gf-panel, .gf-form .gf-panel + .gf-panel { margin-top: 16px; }
.gf-form > .gf-panel + .gf-btn { margin-top: 20px; }

/* Flash messages under the nav */
.gf-flash-wrap { padding-top: 16px; }
.gf-flash { animation: gfMsgIn 240ms var(--ease-out) both; }

/* Pager */
.gf-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; font-size: 15px; }
.gf-pager-pos { color: var(--muted); }

/* ── Size and colour pickers (real radios, styled like the old buttons) ── */
.gf-size-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-size-radio { position: relative; }
.gf-size-radio input,
.gf-swatch-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gf-size-radio span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 15px; color: var(--text); cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.gf-filter-sizes .gf-size-radio span { min-width: 48px; padding: 9px 12px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .gf-size-radio span:hover { border-color: var(--muted); }
}
.gf-size-radio input:checked + span { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.gf-size-radio input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.gf-swatch-radio { display: inline-flex; cursor: pointer; }
.gf-swatch-radio input:checked + .gf-swatch { outline-color: var(--accent-strong); }
.gf-swatch-radio input:focus-visible + .gf-swatch { outline-color: var(--muted); }
.gf-pdp-opt { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.gf-pdp-opt legend { float: left; padding: 0; }
.gf-pdp-opt .gf-pdp-opt-head { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
.gf-pdp-opt .gf-pdp-opt-head + * { clear: both; }
.gf-opt-selected { color: var(--muted); font-weight: 400; margin-inline-start: 6px; }
.gf-opt-error { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--danger); }
.gf-opt-error::before { content: '⚠︎ '; }
.gf-pdp-low { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.gf-pdp-soldout { margin: 8px 0 14px; font-size: 17px; font-weight: 600; }
.gf-pdp-buy .gf-btn { width: 100%; }
.gf-pdp-buy .gf-pdp-buynow { margin-top: 10px; }

/* Card link shown instead of "Add to bag" when a size is needed */
.gf-add-to-cart-link { font-size: 14px; font-weight: 500; color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Photos inside placeholder frames */
.gf-ph-img { padding: 0; overflow: hidden; }
.gf-ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf-hero-media > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.gf-card-link img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Shop filters ── */
.gf-price-inputs { gap: 10px; }

/* ── Bag ── */
.gf-cart-pay-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.gf-cart-pay-note svg { width: 14px; height: 14px; }
.gf-cart-item-qty, .gf-cart-item-end form { margin: 0; }
#gf-coupon-msg[data-state="err"] { color: var(--danger); font-weight: 500; }
#gf-coupon-msg[data-state="ok"] { color: var(--muted); }
.gf-coupon-remove { margin-top: 8px; background: none; border: 0; padding: 0; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
[hidden] { display: none !important; }

/* ── Checkout ── */
.gf-checkout-form .gf-panel { margin-bottom: 16px; }
.gf-checkout-form > .gf-msg-err { margin-bottom: 16px; }
.gf-optional { color: var(--muted); font-weight: 400; }
.gf-field-err { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--danger); }
.gf-field-err::before { content: '⚠︎ '; }
.gf-input[aria-invalid="true"], .gf-select[aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: inset 0 0 0 1px var(--danger); }
.gf-input[aria-invalid="true"]:focus, .gf-select[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent); }
textarea.gf-input { resize: vertical; min-height: 88px; line-height: 1.5; }
.gf-pay-options { display: grid; gap: 10px; }
.gf-pay-option {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.gf-pay-option:has(input:checked) { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.gf-pay-option input { margin-top: 3px; accent-color: var(--accent-strong); width: 18px; height: 18px; flex: none; }
.gf-pay-option-body { display: grid; gap: 4px; }
.gf-pay-option-body small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.gf-co-submit { width: 100%; }
.gf-co-submit.gf-busy { opacity: .6; cursor: progress; }
.gf-form-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.gf-form-note.center { text-align: center; }
.gf-form-note a { text-decoration: underline; }
.gf-co-edit { display: inline-flex; margin-top: 14px; }

/* ── Order page ── */
.gf-order-page .gf-page-head { margin-bottom: 28px; }
.gf-order-pay { display: flex; justify-content: center; margin-bottom: 28px; }
.gf-order-grid { align-items: start; gap: 16px; margin-bottom: 16px; }
.gf-order-page > .gf-container > .gf-panel { margin-bottom: 16px; }
.gf-co-item-noimg .gf-co-item-meta { flex: 1; min-width: 0; }
.gf-os-icon { margin: 0 auto 16px; }
.gf-os-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.gf-spinner { display: inline-block; width: 26px; height: 26px; border-radius: 999px; border: 2.5px solid var(--line); border-top-color: var(--text); animation: gf-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .gf-spinner { animation-duration: 2.4s; } }

/* ── Search ── */
.gf-search-inline { display: flex; gap: 8px; max-width: 560px; margin-top: 16px; }
.gf-search-inline .gf-input { flex: 1; min-width: 0; }

/* ── Empty-state actions side by side ── */
.gf-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.gf-empty-actions form { margin: 0; }
.gf-pdp-short { margin-bottom: 22px; }

/* Server-rendered messages are visible from the start (theme.css hides .gf-msg-* until JS shows them) */
.gf-msg-show { display: flex !important; }

/* Panels that hold form fields stack them with even spacing */
.gf-form .gf-panel, .gf-checkout-form .gf-panel, .gf-panel.gf-form { display: grid; gap: 16px; }
.gf-form .gf-panel > .gf-t-title, .gf-panel.gf-form > .gf-t-title, .gf-form .gf-panel > .gf-hint { margin: 0; }
#gf-mysql { display: grid; gap: 16px; }
#gf-mysql[hidden] { display: none; }

/* "Previous" links point backwards (pagination and back links) */
/* ── Back link: arrow points the other way ──────────────── */
.gf-pg-back,
.gf-more-back { flex-direction: row-reverse; }
.gf-pg-back::after,
.gf-more-back::after {
  margin-inline-start: 0;
  margin-inline-end: .3em;
  transform: translateX(1px) rotate(-135deg);
}
[dir="rtl"] .gf-pg-back::after,
[dir="rtl"] .gf-more-back::after { transform: translateX(-1px) rotate(135deg); }
@media (hover: hover) and (pointer: fine) {
  .gf-pg-back:hover::after,
  .gf-more-back:hover::after { transform: translateX(-2px) rotate(-135deg); }
  [dir="rtl"] .gf-pg-back:hover::after,
  [dir="rtl"] .gf-more-back:hover::after { transform: translateX(2px) rotate(135deg); }
}

/* Search fields: the browser's clear button stays neutral (Chrome draws it blue) */
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; }

/* Sort control: "Sort by" + a pill that fits the chosen option */
.gf-shop-sort { display: inline-flex; align-items: center; gap: 10px; }
.gf-shop-sort-label { font-size: 14px; color: var(--muted); white-space: nowrap; }
.gf-shop-sort .gf-select { field-sizing: content; max-width: 100%; }

/* Quantity steppers use − / + only; hide the browser's own up/down arrows */
.gf-qty input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.gf-qty input[type="number"]::-webkit-inner-spin-button,
.gf-qty input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gf-filter-clear { display: block; width: 100%; margin-top: 12px; padding: 10px; background: none; border: 0; font: inherit; font-size: 15px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gf-filter-clear[hidden] { display: none; }
.gf-popover a, .gf-seg a { text-decoration: none; color: inherit; }

/* Errors are red: message boxes get a light red tint and a red edge */
.gf-msg-err { background: color-mix(in srgb, var(--danger) 9%, var(--bg)); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }
.gf-msg-err a { color: inherit; text-decoration: underline; }

/* Breadcrumbs: a drawn chevron that points the reading direction (flips for Dari/Pashto),
   and room before the product gallery */
.gf-crumbs .gf-crumb-sep {
  width: 6px; height: 6px; flex: none;
  border-top: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor;
  transform: rotate(45deg); margin-inline: 4px 6px; opacity: .5;
}
[dir="rtl"] .gf-crumbs .gf-crumb-sep { transform: rotate(-45deg); }
.gf-pdp .gf-crumbs { margin-bottom: clamp(20px, 3vw, 32px); }

/* ── Logo: the brand mark as a mask, so it is black in light mode and white in dark mode ── */
.gf-logo-img {
  display: block;
  height: 40px;
  aspect-ratio: 698 / 360;
  background-color: currentColor;
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
          mask: url("../img/logo.png") center / contain no-repeat;
}
.gf-logo { color: var(--text); }
.gf-header-logo .gf-logo-img { height: 46px; }
.gf-sheet-head .gf-logo-img { height: 36px; }
.gf-footer-brand .gf-logo { display: inline-flex; margin-bottom: 14px; }
.gf-footer-brand .gf-logo-img { height: 64px; }
.gf-ld-brand .gf-logo-img { height: 96px; }
@media (max-width: 430px) { .gf-header-logo .gf-logo-img { height: 40px; } }
/* High-contrast / forced-colors: fall back to the plain image */
@media (forced-colors: active) {
  .gf-logo-img { -webkit-mask: none; mask: none; background: url("../img/logo.png") center / contain no-repeat; forced-color-adjust: none; }
}
.gf-logo { align-items: center; }

/* Header: room above and below the logo (logo size unchanged: 46px, 40px on small phones) */
:root { --nav-h: 66px; }
@media (max-width: 430px) { :root { --nav-h: 60px; } }

/* ── Search sheet: a raised panel that drops over the page (clearly separate in dark mode too) ── */
#gf-search-modal { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.gf-search-panel {
  padding: 22px var(--gutter) 28px;
  border-radius: 0 0 var(--r-xl, 28px) var(--r-xl, 28px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-lg);
}
[data-theme="dark"] .gf-search-panel { background: var(--surface); }
.gf-search-panel form {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-inline-end: 44px; /* room for the close button on narrow screens */
}
.gf-search-hints { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.gf-search-hints > div { width: 100%; margin-bottom: 2px; }
.gf-search-hints a {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px;
  font-size: 15px; color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  transition: background-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .gf-search-hints a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); }
}
#gf-search-modal-close { top: 26px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
[data-theme="dark"] #gf-search-modal-close { background: color-mix(in srgb, var(--text) 12%, transparent); }

/* Wishlist: a saved item shows a solid heart (and "Saved") so it isn't tapped again by mistake */
.gf-wishlist-btn .gf-wl-off, .gf-wishlist-btn .gf-wl-on { display: inline-flex; align-items: center; justify-content: center; }
.gf-wishlist-btn .gf-wl-on,
.gf-wishlist-btn.active .gf-wl-off { display: none; }
.gf-wishlist-btn.active .gf-wl-on { display: inline-flex; }

/* Toast: the page stays clickable around it, but its link ("View bag") works */
.gf-toast.show { pointer-events: auto; }
.gf-toast a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; padding: 4px 2px; }

/* The phone-header rule that centres .gf-logo absolutely must only affect the header logo */
.gf-footer .gf-logo,
.gf-sheet-head .gf-logo { position: static; left: auto; transform: none; margin: 0; }
.gf-footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.gf-footer-brand .gf-logo { margin-bottom: 16px; }

/* HesabPay mark (their logo, one colour: black in light mode, white in dark) */
.gf-hesab {
  display: inline-block; flex: none;
  height: .95em; aspect-ratio: 510 / 326;
  background-color: currentColor;
  -webkit-mask: url("../img/hesabpay.png") center / contain no-repeat; mask: url("../img/hesabpay.png") center / contain no-repeat;
  vertical-align: -.1em; margin-inline-end: .4em;
}
.gf-btn .gf-hesab { height: 1em; }
.gf-pay-option-body strong { display: inline-flex; align-items: center; }
.gf-pay-option-body strong .gf-hesab { height: 1.1em; }
.gf-help-card-icon .gf-hesab { height: 20px; margin: 0; }
.gf-pdp-row-ico .gf-hesab { height: 16px; margin: 0; }
.gf-cart-pay-note .gf-hesab { height: 12px; margin: 0; }
@media (forced-colors: active) { .gf-hesab { -webkit-mask: none; mask: none; background: url("../img/hesabpay.png") center / contain no-repeat; forced-color-adjust: none; } }

/* ── Colours: shop filter, card dots, product page ── */
.gf-color-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-color-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.gf-color-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gf-color-chip:has(input:checked) { border-color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.gf-color-chip:has(input:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .gf-color-chip:hover { border-color: var(--muted); } }
.gf-color-dot { width: 20px; height: 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); flex: none; }
.gf-color-dot-multi { background: conic-gradient(#c8202f, #d4b06a, #1f7a4c, #2f5fd0, #8a5cc2, #f0a8bf, #c8202f); }

.gf-card-swatches { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.gf-card-dot { width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent); }
.gf-card-more { font-size: 12px; color: var(--muted); margin-inline-start: 2px; }

.gf-price-soon { color: var(--muted); font-weight: 500; }
.gf-pdp-price .gf-price-soon { font-size: 19px; }
.gf-pdp-opt-count { font-size: 13px; color: var(--muted); }
.gf-pdp-single-colour { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 15px; color: var(--muted); }
.gf-swatch.gf-swatch-sm { width: 16px; height: 16px; outline: none; }
.gf-pdp-soon-note { margin: 4px 0 16px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.gf-pdp-add svg { width: 18px; height: 18px; margin-inline-end: 8px; }

/* Product page: status line beside the wishlist heart when the piece can't be ordered yet */
.gf-pdp-qty-row .gf-pdp-soon-note,
.gf-pdp-qty-row .gf-pdp-soldout { flex: 1; margin: 0; }
.gf-pdp-buy .gf-pdp-add:disabled { opacity: 1; background: var(--surface); color: var(--muted); border-color: transparent; cursor: not-allowed; transform: none; }

/* Homepage photo: same rounded frame as the placeholder it replaces */
.gf-hero-media > img { aspect-ratio: 16 / 8; border-radius: var(--r-xl); }
@media (max-width: 767px) { .gf-hero-media > img { aspect-ratio: 4 / 3; } }

/* Best-seller tiles: product photos are shot on light grey, so text on a photo is always dark
   (in both themes) and sits on a soft fade of the same grey, so it never runs into the product. */
.gf-bento-tile:has(.gf-ph-img) { color: #1d1d1f; background: #f5f5f7; }
.gf-bento-tile:has(.gf-ph-img)::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(245, 245, 247, .96) 35%, rgba(245, 245, 247, 0));
}
.gf-bento-tile:has(.gf-ph-img) .gf-bento-rank,
.gf-bento-tile:has(.gf-ph-img) p { color: #6e6e73; }
.gf-bento-tile:has(.gf-ph-img) > :not(.gf-ph) { z-index: 1; }
.gf-bento-tile .gf-ph-img img { object-fit: cover; object-position: center 40%; }

/* Shop: All / Women / Men segmented control, centred in the toolbar */
.gf-shop-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; }
.gf-shop-toolbar .gf-shop-sort { justify-self: end; }
.gf-shop-for { min-width: 260px; padding: 3px; border-radius: var(--r-pill); }
.gf-shop-for a {
  padding: 8px 18px; font-size: 14px; font-weight: 500; text-align: center; border-radius: var(--r-pill);
  color: var(--muted); transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform 100ms ease-out;
}
.gf-shop-for a.active { color: var(--text); }
.gf-shop-for a:active { transform: scale(.96); }
[data-theme="dark"] .gf-shop-for a.active { background: #3a3a3c; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
@media (max-width: 640px) {
  .gf-shop-toolbar { grid-template-columns: 1fr auto; }
  .gf-shop-for { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .gf-shop-for a:active { transform: none; } }

/* Homepage Instagram: six tiles, each cropped to one post of Instagram's live profile embed.
   The embed is drawn 1091px wide, where its header is 158px and posts are 363px squares
   with 1px gaps; --ig-s (set by a ResizeObserver) scales one post to the tile. */
.gf-ig-tile { position: relative; overflow: hidden; isolation: isolate; }
.gf-ig-tile iframe {
  position: absolute; top: 0; left: 0; width: 1091px; height: 885px; border: 0;
  transform-origin: 0 0;
  transform: scale(var(--ig-s, .5)) translate(calc(var(--col) * -364px), calc(-158px - var(--row) * 364px));
}

/* "Follow the look @handle": the handle opens the Instagram profile */
.gf-ig-handle { color: var(--muted); text-decoration: none; transition: color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .gf-ig-handle:hover { color: var(--text); } }
.gf-ig-handle:focus-visible { color: var(--text); outline-offset: 4px; }

/* New-arrival cards: one surface in both themes. The light product photo sits inset with its own
   rounded corners, so it reads as a framed picture instead of a panel cut off at the bottom.
   Light: white card with a hairline + soft shadow. Dark: a raised grey card with a faint edge. */
.gf-shelf-card {
  padding: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), var(--shadow-sm);
}
.gf-sec-surface .gf-shelf-card { background: #fff; }
.gf-shelf-card .gf-ph { border-radius: calc(var(--r-xl) - 8px); }
.gf-shelf-card-body { padding: 16px 16px 18px; }
[data-theme="dark"] .gf-shelf-card,
[data-theme="dark"] .gf-sec-surface .gf-shelf-card {
  background: #1c1c1e;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}
@media (hover: hover) and (pointer: fine) {
  .gf-shelf-card:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), var(--shadow); }
  [data-theme="dark"] .gf-shelf-card:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), var(--shadow); }
}
@media (prefers-contrast: more) {
  .gf-shelf-card { box-shadow: 0 0 0 1px var(--line); }
}

/* Kabul-only products (cakes, flowers) */
.gf-pdp-note { margin: 12px 0 0; font-size: 14px; font-weight: 500; }

/* Checkout: why there's no fee yet, or why the order goes in as a request */
.gf-co-ship-note { margin: 0 0 14px; align-items: flex-start; }
.gf-co-submit:disabled { opacity: .4; cursor: not-allowed; }

.gf-co-ship-note[hidden] { display: none !important; }
.gf-pdp-weight { margin: 10px 0 0; font-size: 14px; font-weight: 500; color: var(--text); }