/* ==========================================================================
   SPICE MARKET RED TEMPLATE — bold red/black/white promotional grocery
   storefront. Centered top logo, two-row header (red promo bar + nav row),
   left-aligned "View all" section headings, badge-heavy product cards.
   Fully dynamic via the `setting()` helper (logo, colors, contact info) and
   fully responsive. Loaded only by
   resources/views/storefront/templates/spice/layouts/app.blade.php.
   ========================================================================== */

:root{
  /* Fixed bold red identity — kept independent of the shared --brand-primary
     admin setting (same reasoning as every other template: a leftover admin
     color from a different template must never leak in here). */
  --cp-blue:       #d32f2f;
  --cp-blue-dark:  color-mix(in srgb, var(--cp-blue) 78%, black 22%);
  --cp-blue-mid:   color-mix(in srgb, var(--cp-blue) 45%, white 55%);
  --cp-blue-light: color-mix(in srgb, var(--cp-blue) 10%, white 90%);
  --cp-blue-soft:  color-mix(in srgb, var(--cp-blue) 5%, white 95%);
  --sp-badge-blue: #2874f0;
  --sp-nav-bg:     #f4f4f4;
  --cp-ink:        #1a1a1a;
  --cp-ink-soft:   #6b6b6b;
  --cp-border:     #e8e8e8;
  --cp-white:      #ffffff;
  --cp-radius:     8px;
  --cp-radius-lg:  16px;
  --cp-shadow:     0 10px 28px rgba(0,0,0,.1);
}

body{ font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--cp-ink); background: var(--cp-white); }

/* ---------- top promo/contact bar ---------- */
.cp-topbar{ background: var(--cp-blue); color:#fff; font-size:12.5px; padding:8px 0; }
.cp-topbar a{ color:#fff; text-decoration:none; }
.cp-topbar a:hover{ color:rgba(255,255,255,.8); }
.cp-topbar .divider{ opacity:.5; margin:0 10px; }
.cp-topbar .cp-social a{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.16); margin-left:6px; }
.cp-topbar .cp-social a:hover{ background:rgba(255,255,255,.3); }

/* ---------- sticky wrapper — keeps BOTH the logo row and the nav row
   visible together while scrolling (the promo bar above it scrolls away
   normally) ---------- */
.cp-sticky-wrap{ background:#fff; }

/* ---------- header: row 1 — centered logo, icons pinned to far corners ---------- */
.cp-header-main{ background:#fff; border-bottom:1px solid var(--cp-border); transition: box-shadow .25s ease; }
.cp-header-row{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:1px 0;
  transition: padding .25s ease;
}

.cp-header-main.cp-is-scrolled{ box-shadow: var(--cp-shadow); }
.cp-header-main.cp-is-scrolled .cp-header-row{ padding: 1px 0; }
.cp-header-main.cp-is-scrolled .cp-brand img{ height: 40px !important; max-height: 40px !important; }
.cp-header-main.cp-is-scrolled .cp-brand-text{ font-size: 16px !important; }
.cp-header-main.cp-is-scrolled .cp-brand:has(img) .cp-brand-text{ font-size: 10px !important; }
.cp-header-side{ display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:nowrap; }
.cp-header-side.left{ justify-content:flex-start; }
.cp-header-side.right{ justify-content:flex-end; }
.cp-header-row > *{ min-width:0; }
.cp-brand{
  grid-column:2;
  justify-self:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-decoration:none; min-width:0; max-width:100%;
}
.cp-brand img{ height:var(--cp-logo-h, 46px); max-height:200px; width:auto; max-width:min(280px, 55vw); flex-shrink:0; transition: height .25s ease, max-height .25s ease; }
.cp-brand .cp-brand-text{ font-family:'Poppins', sans-serif; font-weight:800; font-size:24px; color: var(--cp-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; transition: font-size .25s ease; }
.cp-brand:has(img) .cp-brand-text{ font-size:14px; letter-spacing:.03em; text-transform:uppercase; font-weight:800; }

.cp-icon-btn{
  width:40px; height:40px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--cp-border); color: var(--cp-ink); background:#fff;
  position:relative; text-decoration:none;
}
.cp-icon-btn:hover{ background: var(--cp-blue); color:#fff; border-color: var(--cp-blue); }
.cp-account-toggle{ width:auto; min-width:40px; padding:0 12px; gap:6px; font-size:13.5px; font-weight:600; white-space:nowrap; }
.cp-account-toggle::after{ display:none; }
.cp-cart-count{
  position:absolute; top:-4px; right:-4px; background: var(--cp-blue); color:#fff; font-size:10px; font-weight:700;
  border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}

/* ---------- header: row 2 — light gray nav bar, bold black links ---------- */
.cp-nav-row{ background: var(--cp-nav-bg-color, var(--sp-nav-bg)); border-bottom:0px solid var(--cp-border); }
.cp-nav{ display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; }
.cp-nav a{
  color: var(--cp-nav-text-color, var(--cp-ink)); text-decoration:none; font-size: var(--cp-nav-font-size, 13.5px); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; padding:13px 0; display:inline-block; border-bottom:2px solid transparent;
}
.cp-nav a:hover, .cp-nav a.active{ color:black; border-color: var(--cp-blue); }
.cp-nav-dropdown{ position:relative; }
.cp-nav-dropdown .dropdown-toggle{ cursor:pointer; }
.cp-nav-dropdown .dropdown-toggle::after{ margin-left:6px; vertical-align:2px; }
.cp-nav-dropdown .dropdown-menu{ border:1px solid var(--cp-border); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow); padding:8px; margin-top:0; }
.cp-nav-dropdown .dropdown-item{ border-radius:6px; padding:8px 12px; font-size:13.5px; color: var(--cp-ink); font-weight:600; }
.cp-nav-dropdown .dropdown-item:hover, .cp-nav-dropdown .dropdown-item:focus{ background: var(--cp-blue-light); color: var(--cp-blue); }

/* ---------- hero ---------- */
.cp-hero{
  background-color: var(--cp-blue-soft);
  background-image: linear-gradient(120deg, #fdf3ee, #fce4de 60%, #f8d3c8);
  overflow:hidden; position:relative;
  min-height: var(--cp-hero-height, 460px); display:flex; align-items:center;
}
.cp-hero-has-image{ background-size: var(--cp-hero-bg-size, contain); background-position:center; background-repeat:no-repeat; }
@media (max-width:767.98px){ .cp-hero{ min-height:280px; } }
@media (max-width:479.98px){ .cp-hero{ min-height:200px; } }

/* ---------- hero carousel (full-bleed, edge-to-edge) ---------- */
.cp-hero-carousel{ overflow:hidden; }
.cp-hero-2{ background-image: linear-gradient(120deg, #fef8e8, #fdecc4 60%, #fbdfa0); }
.cp-hero-3{ background-image: linear-gradient(135deg, #eef4fb, #d9e8f7 65%, #c3dcf3); }
.cp-hero-carousel .carousel-control-prev,
.cp-hero-carousel .carousel-control-next{ width:64px; opacity:1; }
.cp-carousel-arrow{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.85);
  display:inline-flex; align-items:center; justify-content:center; color: var(--cp-ink); font-size:1.1rem;
  border:1px solid var(--cp-border); box-shadow: var(--cp-shadow); transition:background .15s ease;
}
.cp-carousel-arrow:hover{ background:#fff; color: var(--cp-blue); }
.cp-carousel-dots{ position:absolute; bottom:16px; margin:0; gap:8px; }
.cp-carousel-dots [data-bs-target]{
  width:9px; height:9px; border-radius:50%; background:rgba(0,0,0,.2); opacity:1;
  border:none; margin:0 4px; text-indent:-9999px;
}
.cp-carousel-dots [data-bs-target].active{ background: var(--cp-blue); }
@media (max-width:575.98px){
  .cp-hero-carousel .carousel-control-prev,
  .cp-hero-carousel .carousel-control-next{ width:44px; }
  .cp-carousel-arrow{ width:32px; height:32px; font-size:.85rem; }
}

/* ---------- category tiles — large rectangular photo with bold
   centered uppercase title overlaid directly on the image ---------- */
.cp-cat-tile{ display:block; text-decoration:none; height:100%; }
.cp-cat-tile .shot{
  position:relative; width:100%; height:300px; background: var(--cp-blue-light);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cp-cat-tile .shot img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.cp-cat-tile:hover .shot img{ transform: scale(1.06); }
.cp-cat-tile .shot::after{ content:''; position:absolute; inset:0; background: rgba(10,10,10,.32); transition: background .2s ease; }
.cp-cat-tile:hover .shot::after{ background: rgba(10,10,10,.44); }
.cp-cat-tile .shot h6{
  position:absolute; inset:0; z-index:1; margin:0; padding:0 14px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; font-weight:800; font-size:clamp(18px,2.2vw,26px); text-transform:uppercase;
  letter-spacing:.01em; line-height:1.15; text-shadow:0 2px 10px rgba(0,0,0,.4);
}
@media (max-width:767.98px){ .cp-cat-tile .shot{ height:220px; } }

/* ---------- section heading — bold black, left-aligned, red "View all" pill ---------- */
.cp-heading{ text-align:center; margin-bottom:32px; }
.cp-heading h2{ font-family:'Poppins', sans-serif; font-weight:800; font-size:clamp(22px,2.8vw,30px); color: var(--cp-ink); margin:0; }
.cp-heading p{ color: var(--cp-ink-soft); max-width:52ch; margin:8px auto 0; }
.cp-heading.left{ text-align:left; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cp-view-all{
  background: var(--cp-blue); color:#fff; text-decoration:none; font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; padding:9px 22px; border-radius:999px; flex-shrink:0;
}
.cp-view-all:hover{ background: var(--cp-blue-dark); color:#fff; }

/* ---------- alternating section background ---------- */
.cp-section-alt{ background: var(--cp-blue-soft); }

/* ---------- about us — admin can flip which side the photo sits on
   (about_image_position); text is justified, photo is a fixed 4:3 box
   regardless of the source image's own dimensions ---------- */

.cp-about {
    background: var(--cp-blue-soft);
    padding: 36px 0;
}
.cp-about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.cp-about .kicker{ text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:12.5px; color: var(--cp-blue); }
.cp-about h2{ font-family:'Poppins', sans-serif; font-weight:800; font-size:clamp(24px,3vw,32px); color: var(--cp-ink); margin:10px 0 16px; }
.cp-about p{ color: var(--cp-ink-soft); line-height:1.75; text-align:justify; }
.cp-about-photo{
  border-radius: var(--cp-radius-lg); overflow:hidden; background: var(--cp-blue-soft);
  height: var(--cp-about-img-height, 320px); width:100%; max-width: var(--cp-about-img-max-width, 100%); margin:0 auto;
}
/*.cp-about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }*/
.cp-about-photo img{ width:100%; height:100%;  display:block; }
@media (max-width:767.98px){ .cp-about-inner{ grid-template-columns:1fr; gap:28px; } .cp-about-photo{ order:-1; } }

/* ---------- product grid & card ---------- */
.cp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1199.98px){ .cp-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:899.98px){ .cp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479.98px){ .cp-grid{ grid-template-columns:1fr; } }

.cp-card{ background:#fff; border:none; border-radius: var(--cp-radius-lg); overflow:hidden; box-shadow:0 2px 14px rgba(10,10,10,.07); transition: box-shadow .2s ease, transform .2s ease; display:flex; flex-direction:column; height:100%; }
.cp-card:hover{ box-shadow:0 10px 28px rgba(10,10,10,.15); transform: translateY(-3px); }
.cp-card .shot{ position:relative; aspect-ratio:1/1; background: var(--cp-blue-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cp-card .shot img{ width:100%; height:100%; object-fit:cover; }
.cp-card .discount-tag{ position:absolute; top:10px; left:10px; background: var(--sp-badge-blue); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:4px; z-index:1; }
.cp-quickview{
  position:absolute; top:8px; right:8px; z-index:1; width:30px; height:30px; border-radius:50%;
  background: var(--cp-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;
  text-decoration:none; box-shadow: var(--cp-shadow);
}
.cp-quickview:hover{ background: var(--cp-blue-dark); color:#fff; }
.cp-card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.cp-card h5{ font-size:14.5px; font-weight:600; color: var(--cp-ink); margin:0; line-height:1.35; }
.cp-card .price{ color: var(--cp-blue); font-weight:800; font-size:16px; }
.cp-card .price .old{ color:#9a9a9a; text-decoration:line-through; font-weight:400; font-size:12.5px; margin-left:6px; }
.cp-weight-pill{ display:inline-block; background: var(--cp-ink); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; width:fit-content; }
.cp-card .cp-add-btn{
  margin-top:auto; background: var(--cp-blue); color:#fff; border:none; border-radius:999px;
  padding:11px 0; font-weight:700; font-size:13px; letter-spacing:.02em; text-decoration:none; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
}
.cp-card .cp-add-btn:hover{ background: var(--cp-blue-dark); color:#fff; }
.cp-card .cp-add-btn.out{ background: var(--cp-border); color: var(--cp-ink-soft); pointer-events:none; }

/* ---------- filter sidebar ---------- */
.cp-filter{ background:#fff; border:1px solid var(--cp-border); border-radius: var(--cp-radius); padding:22px; }
.cp-filter-title{ font-family:'Poppins', sans-serif; font-weight:800; color: var(--cp-ink); margin-bottom:16px; font-size:17px; }
.cp-filter-label{ font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color: var(--cp-ink); display:block; margin-bottom:10px; }
.cp-btn-blue{ background: var(--cp-blue); color:#fff; border:none; padding:10px 0; border-radius:999px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; font-size:12.5px; text-decoration:none; display:block; text-align:center; width:100%; }
.cp-btn-blue:hover{ background: var(--cp-blue-dark); color:#fff; }
.cp-breadcrumb{ font-size:13px; color: var(--cp-ink-soft); }
.cp-breadcrumb a{ color: var(--cp-ink-soft); text-decoration:none; }
.cp-breadcrumb a:hover{ color: var(--cp-blue); }
.cp-breadcrumb b{ color: var(--cp-ink); }

/* ---------- dual-handle price range slider ---------- */
.cp-price-range{ margin-bottom:20px; }
.cp-price-values{ display:flex; justify-content:space-between; font-weight:700; color: var(--cp-blue); font-size:13px; margin-bottom:16px; }
.cp-slider-wrap{ position:relative; height:16px; }
.cp-slider-track{ position:absolute; top:6px; left:0; right:0; height:4px; background: var(--cp-border); border-radius:2px; }
.cp-slider-range{ position:absolute; top:6px; height:4px; background: var(--cp-blue); border-radius:2px; }
.cp-range{ position:absolute; top:0; left:0; width:100%; margin:0; height:16px; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none; }
.cp-range::-webkit-slider-runnable-track{ background:transparent; height:16px; }
.cp-range::-moz-range-track{ background:transparent; height:16px; }
.cp-range::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:17px; height:17px; margin-top:0; border-radius:50%;
  background: var(--cp-blue); border:3px solid #fff; box-shadow:0 0 0 1px var(--cp-blue), var(--cp-shadow); cursor:pointer;
}
.cp-range::-moz-range-thumb{
  pointer-events:auto; width:17px; height:17px; border-radius:50%; background: var(--cp-blue); border:3px solid #fff;
  box-shadow:0 0 0 1px var(--cp-blue), var(--cp-shadow); cursor:pointer;
}

/* ---------- product detail page ---------- */
.cp-main-shot{ aspect-ratio:1/1; background: var(--cp-blue-soft); border-radius: var(--cp-radius); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cp-main-shot img{ max-width:85%; max-height:85%; object-fit:contain; cursor:zoom-in; }
.cp-pdp-thumb{ width:64px; height:64px; border-radius:8px; border:1px solid var(--cp-border); object-fit:contain; padding:6px; background: var(--cp-blue-soft); cursor:pointer; transition:border-color .15s ease; }
.cp-pdp-thumb:hover{ border-color: var(--cp-blue); }
.cp-pdp-thumb.active{ border-color: var(--cp-blue); border-width:2px; box-shadow:0 0 0 1px var(--cp-blue); }

/* ---------- variant pills ---------- */
.cp-variant-pill{ border:1.5px solid var(--cp-border); background:#fff; color: var(--cp-ink); border-radius:999px; padding:.45rem 1rem; font-weight:600; font-size:.85rem; }
.cp-variant-pill:hover{ border-color: var(--cp-blue); color: var(--cp-blue); }
.cp-variant-pill.active{ background: var(--cp-blue); border-color: var(--cp-blue); color:#fff; }

/* ---------- cart / summary ---------- */
.cp-cart-row{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--cp-border); align-items:center; }
.cp-cart-row img{ width:82px; height:82px; object-fit:cover; border-radius:8px; background: var(--cp-blue-soft); }
.cp-summary{ background: var(--cp-blue-soft); border:1px solid var(--cp-border); border-radius: var(--cp-radius); padding:24px; }
.cp-summary h5{ font-family:'Poppins', sans-serif; font-weight:800; color: var(--cp-ink); margin-bottom:16px; }

/* ---------- testimonials ---------- */
.cp-testimonial{ background:#fff; border:1px solid var(--cp-border); border-radius: var(--cp-radius); padding:26px; height:100%; }
.cp-testimonial .quote{ color: var(--cp-blue-light); font-size:2rem; line-height:1; }
.cp-testimonial p{ color: var(--cp-ink-soft); font-style:italic; }
.cp-testimonial .who{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.cp-testimonial img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.cp-testimonial h6{ margin:0; font-weight:700; color: var(--cp-ink); }
.cp-testimonial span{ font-size:12px; color: var(--cp-blue); }

/* ---------- subscribe band ---------- */
.cp-subscribe{ background: var(--cp-ink); border-radius: var(--cp-radius-lg); padding:52px 24px; text-align:center; color:#fff; margin:60px 0; }
.cp-subscribe h3{ font-family:'Poppins', sans-serif; font-weight:800; font-size:26px; }
.cp-subscribe p{ color:rgba(255,255,255,.75); max-width:44ch; margin:10px auto 26px; }
.cp-subscribe form{ display:flex; max-width:440px; margin:0 auto; border-radius:999px; overflow:hidden; background:#fff; }
.cp-subscribe input{ flex:1; border:none; padding:13px 18px; font-size:14px; min-width:0; }
.cp-subscribe input:focus{ outline:none; }
.cp-subscribe button{ background: var(--cp-blue); color:#fff; border:none; padding:0 26px; font-weight:700; text-transform:uppercase; font-size:12.5px; letter-spacing:.03em; }
.cp-subscribe button:hover{ background: var(--cp-blue-dark); }

/* ---------- footer ---------- */
.cp-footer{ background: var(--cp-ink); color:rgba(255,255,255,.68); padding:56px 0 0; margin-top:60px; }
.cp-footer .cp-brand .cp-brand-text{ color:#fff; }
.cp-footer h3{ color:#fff; font-family:'Poppins', sans-serif; font-weight:700; font-size:15.5px; margin-bottom:18px; }
.cp-footer ul{ list-style:none; margin:0; padding:0; }
.cp-footer li{ margin-bottom:10px; font-size:13.5px; }
.cp-footer a{ color:rgba(255,255,255,.68); text-decoration:none; }
.cp-footer a:hover{ color: var(--cp-blue-mid); }
.cp-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding:18px 0; text-align:center; font-size:12.5px; color:rgba(255,255,255,.5); }

/* ---------- shared storefront components (mobile offcanvas/bottom-nav) —
   force the same fixed red so they don't pick up a leftover admin
   primary_color from a different template ---------- */
.btn-brand{ background: var(--cp-blue) !important; box-shadow:none !important; }
.btn-brand:hover{ background: var(--cp-blue-dark) !important; }
.text-brand{ color: var(--cp-blue) !important; }
.sf-bottom-nav a.active{ color: var(--cp-blue) !important; }

/* ---------- responsive ---------- */
@media (max-width:767.98px){
  .cp-header-row{ padding:1px 0; }
  .cp-brand img{ max-height:min(var(--cp-logo-h, 46px), 96px); }
  .cp-brand .cp-brand-text{ font-size:19px; }
  .cp-icon-btn{ width:34px; height:34px; font-size:.9rem; flex-shrink:0; }
  .theme-toggle-btn{ width:34px; height:34px; }
  .cp-header-side{ gap:4px; }
}
@media (max-width:359.98px){
  .cp-icon-btn{ width:30px; height:30px; }
}