/* ==========================================================================
   SHOP THEME — loaded after Bootstrap 5, so anything here overrides it.
   Change the values in this first block to restyle the whole site.
   Bootstrap's own variables: https://getbootstrap.com/docs/5.3/customize/css-variables/
   ========================================================================== */
:root {
  /* Main brand colour (buttons, links, badges). Keep --brand-rgb in sync. */
  --brand: #2f6f4f;
  --brand-rgb: 47, 111, 79;

  /* Page + header + footer colours */
  --page-bg: #faf9f7;
  --navbar-bg: #ffffff;
  --footer-bg: #ffffff;
  --hero-bg: #eef3ef;

  /* Typography */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: inherit;

  /* Shape */
  --bs-border-radius: .6rem;
  --bs-border-radius-lg: .9rem;

  /* ---- wiring: maps the brand colour onto Bootstrap (normally no need to edit) ---- */
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color-rgb: var(--brand-rgb);
  --bs-body-bg: var(--page-bg);
}

/* Buttons follow the brand colour — including each section's own accent colour. */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand) 75%, #000);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: rgba(var(--brand-rgb), .5);
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .2);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--heading-font); }

/* Header / footer */
.site-navbar { background: var(--navbar-bg); border-bottom: 1px solid var(--bs-border-color); }
.site-navbar .nav-link.active { color: var(--brand); font-weight: 600; }
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--brand); }

/* Home + section heroes */
.home-hero { background: var(--hero-bg); }
.section-rule { border-color: var(--brand) !important; }
.section-hero { background-color: var(--brand); background-size: cover; background-position: center; }
.section-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.7); --bs-breadcrumb-item-active-color: rgba(255,255,255,.85); }
.section-hero .breadcrumb a { color: #fff; }

/* Products */
.product-card { transition: transform .15s ease, box-shadow .15s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08); }
.product-card .card-title { color: var(--bs-body-color); }
.price { font-weight: 700; color: var(--brand); }
.no-img { font-size: 3rem; font-weight: 700; color: var(--brand); opacity: .35; }
/* Formatted product descriptions (from the WYSIWYG editor) */
.rich-text { line-height: 1.65; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h2 { font-size: 1.35rem; margin: 1.25rem 0 .5rem; }
.rich-text h3 { font-size: 1.15rem; margin: 1rem 0 .4rem; }
.rich-text ul, .rich-text ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.rich-text li { margin-bottom: .25rem; }
.rich-text blockquote { border-left: 4px solid var(--brand); padding-left: 1rem; color: var(--bs-secondary-color); }
.rich-editor.ql-container { min-height: 220px; font: inherit; font-size: 1rem;
  border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); background: var(--bs-body-bg); }
.ql-toolbar.ql-snow { border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); }
.rich-editor .ql-editor { min-height: 220px; }

/* Product flip cards (section pages + home): image on the front, brief info + price on the back */
:root {
  --flip-duration: 1.1s;   /* how long the turn takes — bigger = slower */
  --flip-delay: .2s;       /* pause after the mouse arrives before it starts turning */
}
.flip-card { display: block; perspective: 1200px; color: var(--bs-body-color); }
.flip-inner { position: relative; aspect-ratio: 4 / 5; transform-style: preserve-3d;
  transition: transform var(--flip-duration) cubic-bezier(.45, .05, .25, 1);   /* turning back: no pause */ }
@media (hover: hover) { .flip-card:hover .flip-inner { transition-delay: var(--flip-delay); } }
.flip-face { position: absolute; inset: 0; border-radius: var(--bs-border-radius-lg); overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 1px solid var(--bs-border-color); }
.flip-front { display: flex; flex-direction: column; background: var(--bs-body-bg); }
.flip-image { position: relative; flex: 1; min-height: 0; background: var(--gallery-bg, #fff); display: flex; align-items: center; justify-content: center; }
.flip-image img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.flip-caption { padding: .6rem .8rem; border-top: 1px solid var(--bs-border-color); }
.flip-caption h3 { color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flip-hint { position: absolute; right: .5rem; bottom: .5rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: .85rem; opacity: .8; }
.flip-back { transform: rotateY(180deg); background: var(--brand); color: #fff; padding: 1.1rem;
  display: flex; flex-direction: column; justify-content: center; text-align: center; }
.flip-back h3 { color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; }
.flip-brief { opacity: .92; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; }
.flip-price { font-size: 1.5rem; font-weight: 700; flex-shrink: 0; }
.flip-back .btn { align-self: center; color: var(--brand); font-weight: 600; flex-shrink: 0; }
/* Small cards (e.g. two per row on phones): tighter text so everything fits on the back. */
.flip-card { container-type: inline-size; }
@container (max-width: 240px) {
  .flip-back { padding: .7rem; }
  .flip-back h3 { font-size: .85rem; -webkit-line-clamp: 2; margin-bottom: .35rem !important; }
  .flip-brief { font-size: .75rem; -webkit-line-clamp: 2; margin-bottom: .35rem !important; }
  .flip-back p.small { font-size: .72rem; margin-bottom: .35rem !important; }
  .flip-price { font-size: 1.15rem; }
  .flip-back .btn { font-size: .75rem; padding: .2rem .5rem; margin-top: .35rem !important; }
}
/* Flip on hover (mouse), on keyboard focus, or when tapped on touch screens (.flipped is set in base.html). */
@media (hover: hover) { .flip-card:hover .flip-inner { transform: rotateY(180deg); } }
.flip-card:focus-visible .flip-inner, .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-card:focus-visible { outline: none; }
.flip-card:focus-visible .flip-face { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .45); }
@media (hover: hover) { .flip-hint { display: none; } }   /* the tap hint is only needed on touch screens */
/* Reduced motion: fade instead of spinning. */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; transform: none !important; }
  .flip-back { transform: none; opacity: 0; transition: opacity calc(var(--flip-duration) * .6); }
  .flip-card.flipped .flip-back, .flip-card:focus-visible .flip-back { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) { .flip-card:hover .flip-back { opacity: 1; } }

/* Marketplace */
.seller-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--bs-border-color); }
.seller-logo-lg { width: 88px; height: 88px; }

/* Star ratings + reviews */
:root { --star-colour: #f5a623; }
.stars { color: var(--star-colour); letter-spacing: .05em; white-space: nowrap; }
.flip-back .stars { color: #ffd166; }
.rating-summary:hover .text-body-secondary { text-decoration: underline; }
.rating-bar { background-color: var(--star-colour); }
.review-body { white-space: pre-line; }
.review-thumb { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: #fff; }
/* Star picker on the review form: inputs are 5→1 in the HTML; row-reverse shows them 1→5 and lets
   "this star and all before it" light up on hover/selection with sibling selectors. */
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; font-size: 2rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { color: var(--bs-border-color); cursor: pointer; transition: color .12s, transform .12s; line-height: 1; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--star-colour); }
.star-input label:hover { transform: scale(1.12); }
.star-input input:focus-visible + label { outline: 2px solid rgba(var(--brand-rgb), .6); outline-offset: 2px; border-radius: 4px; }
.star-input.is-invalid label { color: rgba(var(--bs-danger-rgb), .35); }

/* Product image gallery (product page) */
:root {
  --gallery-max: 440px;        /* largest the main image gets */
  --gallery-bg: #ffffff;       /* background behind photos (shows around non-square images) */
  --thumb-size: 64px;          /* thumbnail squares */
}
.product-gallery { max-width: var(--gallery-max); }
.gallery-main {
  position: relative; aspect-ratio: 1; background: var(--gallery-bg);
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); overflow: hidden;
}
.gallery-main .carousel-inner, .gallery-main .carousel-item { height: 100%; }
.gallery-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-zoom img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; }
.gallery-hint { position: absolute; right: .6rem; bottom: .5rem; color: var(--bs-secondary-color); font-size: .8rem; pointer-events: none;
  opacity: .8; background: rgba(255,255,255,.85); padding: .1rem .5rem; border-radius: 99px; transition: opacity .2s; }
.gallery-hint .hover-only { display: none; }
@media (hover: hover) and (pointer: fine) { .gallery-hint .hover-only { display: inline; } }

/* Hover zoom on the product page's main image (set up in product.html) */
:root {
  --zoom-min: 2;   /* least magnification when hovering */
  --zoom-max: 3;   /* most magnification (used when the photo has enough resolution) */
}
.gallery-zoom img { transition: transform .15s ease-out; will-change: transform; }
.gallery-zoom.zooming { cursor: crosshair; }
.gallery-zoom.zooming img { transition: none; }   /* follow the mouse instantly while zoomed */
.gallery-main:has(.zooming) .gallery-hint,
.gallery-main:has(.zooming) .carousel-control-prev,
.gallery-main:has(.zooming) .carousel-control-next { opacity: 0 !important; }
.gallery-main .carousel-control-prev, .gallery-main .carousel-control-next { width: 3rem; opacity: 0; transition: opacity .15s; }
.gallery-main:hover .carousel-control-prev, .gallery-main:hover .carousel-control-next,
.gallery-main .carousel-control-prev:focus, .gallery-main .carousel-control-next:focus { opacity: 1; }
@media (hover: none) { .gallery-main .carousel-control-prev, .gallery-main .carousel-control-next { opacity: .9; } }
.product-gallery .carousel-control-prev-icon,
.product-gallery .carousel-control-next-icon,
#lightbox .carousel-control-prev-icon,
#lightbox .carousel-control-next-icon { background-color: rgba(0,0,0,.45); border-radius: 50%; background-size: 55%; width: 2.25rem; height: 2.25rem; }

.gallery-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-thumb {
  width: var(--thumb-size); height: var(--thumb-size); padding: 3px; background: var(--gallery-bg);
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); opacity: .65;
  transition: opacity .15s, border-color .15s;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { opacity: 1; border: 2px solid var(--brand); }

.lightbox-img { display: block; width: 100%; height: 80vh; object-fit: contain; }

/* Blog */
.blog-card { transition: transform .15s ease, box-shadow .15s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08); }
.blog-card .card-title { color: var(--bs-body-color); }
.blog-article { max-width: 760px; }
.blog-cover { width: 100%; max-height: 420px; object-fit: cover; }
.blog-body { font-size: 1.075rem; line-height: 1.7; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--bs-border-radius); }
.blog-body h2, .blog-body h3 { margin-top: 2rem; }
.blog-body blockquote { border-left: 4px solid var(--brand); padding-left: 1rem; color: var(--bs-secondary-color); }
.home-hero { color: var(--bs-body-color); }

/* Admin: Google-style SEO preview */
.seo-preview { font-family: Arial, sans-serif; max-width: 600px; }
.seo-preview-title { color: #1a0dab; font-size: 1.15rem; line-height: 1.3; }
[data-bs-theme=dark] .seo-preview-title { color: #8ab4f8; }
.seo-preview-desc { color: var(--bs-secondary-color); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Admin */
.admin-image .ratio { border-radius: var(--bs-border-radius); overflow: hidden; }
.admin-image.is-main { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--bs-border-radius); }
.thumb { max-width: 160px; border-radius: var(--bs-border-radius); }
.thumb-sm { width: 48px; height: 48px; object-fit: cover; border-radius: .4rem; }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; vertical-align: middle; }

/* Search box (navbar) + suggestions */
.nav-search { min-width: 0; }
@media (min-width: 992px) { .nav-search { width: 18rem; } }
@media (min-width: 1200px) { .nav-search { width: 24rem; } }
.search-suggest { max-height: 70vh; overflow-y: auto; top: 100%; left: 0; margin-top: .25rem; }
.search-suggest .suggest-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); padding: .5rem 1rem .2rem; }
.search-suggest .suggest-item { padding-top: .4rem; padding-bottom: .4rem; white-space: normal; }
.search-suggest img, .search-suggest .suggest-noimg { width: 40px; height: 40px; object-fit: cover; border-radius: .35rem; flex: none; background: var(--bs-tertiary-bg); display: inline-flex; align-items: center; justify-content: center; }
.search-suggest .suggest-all { border-top: 1px solid var(--bs-border-color); color: var(--brand); font-weight: 600; }

/* Product lists: filter sidebar (an off-canvas panel on phones) */
.filter-group { border-bottom: 1px solid var(--bs-border-color); padding: .9rem 0; }
.filter-group:first-child { padding-top: 0; }
.filter-group legend { font-size: .95rem; font-weight: 600; margin-bottom: .5rem; }
.filter-group .form-check-label { width: 100%; }
.filter-group .filter-more { display: none; }
.filter-group.show-all .filter-more { display: block; }
@media (min-width: 992px) {
  .filter-panel .offcanvas-body { padding: 0; }
  .filter-panel { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
}
.subcategory-chips .btn.disabled { opacity: 1; }