/*
 * Override the default colour palette with a dark, vibrant theme.  These
 * variables control the primary colours used throughout the plugin.  A
 * dark background (`--bg`) and card colour (`--card`) form the base of
 * the design, while light text and muted shades provide contrast.  The
 * `--brand` variable defines the accent colour used for buttons and other
 * highlights.  Adjust these values to fine tune the overall look and
 * feel of the shop page.
 */
:root{ 
  --bg:#0e0e15;      /* overall page background */
  --card:#1b1b27;    /* panels and card backgrounds */
  --text:#f5f5f5;    /* primary text colour */
  --muted:#8a8fa3;   /* secondary/muted text */
  --brand:#ff2b8a;   /* accent colour for buttons and highlights */
  --ring:rgba(255,43,138,0.3); /* focus ring colour */
  --radius:14px;
  --shadow:0 6px 20px rgba(0,0,0,0.5);
  --gap:.9rem;
}
.cshop-hero{ background:var(--bg); padding:1rem 1rem; }
.cshop-hero__inner{ max-width:1200px; margin:0 auto; text-align:center; }
/* Reduce bottom margin for hero title to tighten spacing around H1 */
.cshop-hero__title{ font-size:clamp(1.6rem,1.3rem + 2vw,2.6rem); line-height:1.15; color:var(--text); margin:0 0 .25rem; }
.cshop-hero__subtitle{ color:var(--muted); margin:0; }
.cshop-section{ max-width:1200px; margin:0 auto; padding:1rem; } .cshop-section__header{ display:flex; align-items:center; justify-content:space-between; margin:.25rem 0 .25rem; gap:.75rem; } .cshop-section__title{ font-size:1.3rem; margin:0; color:var(--text); } .cshop-slider__controls{ display:flex; gap:.5rem; } .cshop-slider__btn{ border:1px solid #e5e7eb; border-radius:999px; background:white; padding:.4rem .7rem; box-shadow:var(--shadow); cursor:pointer; }
.cshop-slider{
  /*
   * Set the default number of visible columns to 3.5.  This allows three
   * full items plus a “peek” of the next item on desktop viewports.  On
   * smaller breakpoints we override this variable to achieve the desired
   * 1.5‑item mobile view and maintain the same 3.5 columns on tablets as
   * on desktops.  The fractional value is consumed by the grid formula in
   * .cshop-track to calculate each slide’s width.
   */
  overflow: hidden;
  --cols: 3.5;
}

/*
 * On very narrow screens (≤ 580px) show one full product and a partial
 * glimpse of the next.  A fractional column count of 1.5 ensures the
 * layout computes widths such that 1½ items are visible.  This replicates
 * the “1.5 thumbnail” requirement on mobile devices.
 */
@media (max-width:580px){
  .cshop-slider{
    --cols: 1.5;
  }
}

/*
 * On small to medium devices (tablets) we display 3½ items, matching the
 * desktop configuration.  Keeping the same value across these breakpoints
 * ensures consistency between tablet and desktop views.
 */
@media (min-width:581px) and (max-width:1023px){
  .cshop-slider{
    --cols: 3.5;
  }
}

/*
 * On large devices (desktops) we also display 3½ items.  Having a single
 * breakpoint ensures the slider doesn’t “jump” when resizing the window
 * across the 1024px threshold.
 */
@media (min-width:1024px){
  .cshop-slider{
    --cols: 3.5;
  }
}
.cshop-track{
  display: grid;
  grid-auto-flow: column;
  /*
   * Calculate each slide’s width based on the number of desired columns and
   * the gap between them.  By removing the minmax() wrapper and using
   * calc() directly, the slide width becomes flexible enough to allow
   * fractional columns (e.g. 3.5 or 1.5).  Without a fixed minimum width
   * each card can shrink proportionally on smaller screens, which makes
   * partially visible slides possible.  The formula subtracts the total
   * horizontal gap from 100% and then divides by the column count.
   */
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)) !important;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .25rem;
}
.cshop-track:focus{ outline:2px solid var(--ring); outline-offset:2px; }
.cshop-slide{ scroll-snap-align: start; }
.cshop-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; min-height:100%; } .cshop-card:focus{ outline:2px solid var(--ring); outline-offset:2px; }
.cshop-card__media{ position:relative; background:#eaeef2; display:block; } .cshop-card__media img,.cshop-card__media video{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9; background:#000; } .cshop-card__play{ position:absolute; inset:auto 10px 10px auto; border:0; background:white; border-radius:999px; padding:.6rem .8rem; box-shadow:var(--shadow); cursor:pointer; } .cshop-card__play::before{ content:'►'; font-weight:700; } .cshop-card__play.playing::before{ content:'❚❚'; }
.cshop-card__body{ padding:.8rem .9rem; display:flex; flex-direction:column; gap:.55rem; } .cshop-card__title{ font-size:1rem; margin:0; } .cshop-card__title a{ color:var(--text); text-decoration:none; } .cshop-card__meta{ display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.9rem; flex-wrap:wrap; } .cshop-card__cta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; } .cshop-price{ font-weight:700; color:var(--text); } .cshop-btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:10px; padding:.5rem .8rem; background:var(--brand); color:white; text-decoration:none; font-weight:600; } .cshop-btn:focus{ outline:2px solid var(--ring); outline-offset:2px; }
.cshop-debug{ display:block; color:#6b7280; font-size:11px; margin-top:6px; }
.cshop-how{ max-width:1200px; margin:0 auto; padding:1rem; } .cshop-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; } .cshop-step{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; display:flex; gap:.75rem; align-items:flex-start; } .cshop-step__num{ width:32px; height:32px; border-radius:999px; background:white; display:grid; place-items:center; box-shadow:var(--shadow); font-weight:700; } .cshop-step__title{ margin:.1rem 0 .2rem; font-size:1rem; } .cshop-step__desc{ margin:0; color:var(--muted); font-size:.95rem; } @media (max-width:900px){ .cshop-steps{ grid-template-columns: repeat(2,1fr);} } @media (max-width:580px){ .cshop-steps{ grid-template-columns:1fr;} .cshop-section__header{ align-items:flex-start;} }

/* === Category Header === */
.cshop-cat-header{max-width:1200px;margin:0 auto;padding:1.25rem 1rem 0;}
.cshop-cat-header__inner{display:block;}
.cshop-cat-title{font-size:clamp(22px,3vw,32px);font-weight:700;margin:0 0 .75rem;color:var(--text,#111827);}
.cshop-cat-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1rem;align-items:start;margin-bottom:1rem;}
.cshop-cat-desc__text{position:relative;line-height:1.6;color:var(--muted,#374151);}
.cshop-cat-desc__text.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;max-height:6.5em;}
.cshop-readmore{margin-top:.5rem;display:inline-block;border:0;background:transparent;color:var(--primary,#111827);cursor:pointer;font-weight:600;padding:0;}
.cshop-cat-image img{width:100%;height:auto;border-radius:8px;display:block;object-fit:cover;}
@media (max-width:900px){
  .cshop-cat-grid{grid-template-columns:1fr;}
}

/* === Shop page description card === */
/*
   The shop description card sits beneath the bottom banner on the main shop
   archive.  It provides a brief introduction drawn from the shop page's
   content.  The card shares similar styling to the category description card
   but is simplified to include only a title and the description block.
*/
.cshop-shop-desc-card{max-width:1200px;margin:2rem auto;padding:1.25rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.05);} 
.cshop-shop-desc-title{font-size:clamp(20px,3vw,30px);font-weight:700;margin:0 0 .75rem;color:var(--text,#111827);} 
/* Reuse existing clamping styles: .cshop-cat-desc and .cshop-cat-desc__text
   will already apply appropriate line clamping.  The readmore button and
   clamped text behave as on the category card. */



/* Centered category header title */
.cshop-cat-header{max-width:1200px;margin:0 auto;padding:1.25rem 1rem 0;text-align:center;}
.cshop-cat-title{margin-left:auto;margin-right:auto;}

/* Category banner: display optional image beneath the title.  We set max-width
   rather than width to avoid upscaling smaller images.  The image is centered
   and maintains its natural aspect ratio. */
.cshop-cat-banner{margin-top:0.5rem;margin-bottom:1rem;}
.cshop-cat-banner img{display:block;margin-left:auto;margin-right:auto;max-width:100%;height:auto;border-radius:8px;}

/* Category description bottom card */
.cshop-cat-card{max-width:1200px;margin:2rem auto;padding:1.25rem 1rem;}
.cshop-cat-card__inner{display:grid;grid-template-columns:1.25fr .75fr;gap:1rem;align-items:start;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.05);padding:1rem;}
.cshop-cat-card .cshop-cat-desc__text{line-height:1.65;color:var(--muted,#374151);}
.cshop-cat-card .cshop-readmore{margin-top:.5rem;display:inline-block;border:0;background:none;color:var(--primary,#111827);cursor:pointer;font-weight:600;padding:0;}
.cshop-cat-card .cshop-cat-image img{width:100%;height:auto;border-radius:10px;display:block;object-fit:cover;}
@media (max-width:900px){
  .cshop-cat-card__inner{grid-template-columns:1fr;}
}


/* How It Works section */
.cshop-how{max-width:1200px;margin:0 auto;padding:1rem 1rem 0;}
.cshop-how__title{text-align:center;font-size:clamp(18px,2.4vw,24px);margin:0 0 .75rem;font-weight:700;color:var(--text,#111827);}
.cshop-how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.cshop-how__card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.04);padding:14px;display:flex;flex-direction:column;align-items:flex-start;}
.cshop-how__step{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;border:1px solid rgba(0,0,0,.12);margin-bottom:8px;}
.cshop-how__heading{font-size:16px;margin:0 0 6px;}
.cshop-how__text{margin:0;color:var(--muted,#374151);line-height:1.55;}
@media (max-width:900px){
  .cshop-how__grid{grid-template-columns:1fr;}
  .cshop-how{padding-top:.5rem;}
}

/* force show how section */
.cshop-how{display:block;}

/* hide breadcrumb fallback */
.woocommerce-breadcrumb, .rank-math-breadcrumb { display: none !important; }

/* === Custom Shop Banners === */
/* Center and constrain the custom banners inserted via plugin settings.  We set a
   maximum width to align with other sections (1200px) and center the container.
   The image scales responsively to the width of its container while preserving
   its aspect ratio. */
.cshop-banner{
  max-width:1200px;
  margin:1rem auto;
  text-align:center;
}
.cshop-banner img{
  width:100%;
  height:auto;
  display:inline-block;
}

/*
 * When a banner image is not provided, text banners can be displayed.
 * These rules style the heading (H1) and tagline (H2) within the banner
 * container to ensure consistent spacing and typography.  The wrapper
 * .cshop-banner-text class allows us to target text-only banners without
 * affecting image banners.
 */
.cshop-banner-text {
  /* Reduce vertical padding on text-only banners to minimise white space */
  padding: 1rem 1rem;
  text-align: center;
}
.cshop-banner-text .cshop-banner-heading {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.cshop-banner-text .cshop-banner-tagline {
  font-size: 1.25rem;
  font-weight: 400;
  color: #555;
  margin: 0;
}

/*
 * Highlight styling for the Instant Delivery slider title.  When the
 * slider_id is 'cshop-instant', the heading receives the class
 * .cshop-highlight-title.  This rule emphasises the text so that
 * customers immediately notice the 60‑minute instant delivery offer.
 */
/*
 * Bubble styling for the Instant Delivery slider title.  A speech-bubble or
 * pill-like background draws the customer’s attention.  We keep the text
 * bold and change the color to a dark red, then add a light background,
 * border and generous border-radius for a bubble effect.  Padding ensures
 * the text sits comfortably inside the bubble.  Display is set to
 * inline-block so that the bubble adapts to the heading’s width.
 */
.cshop-highlight-title {
  color: #b91c1c;
  /* Match the overall slider heading size and reduce weight so the text
     appears less overpowering.  The default .cshop-section__title uses
     1.3rem, so here we set a slightly smaller size and normalised
     weight. */
  font-size: 1.0rem;
  font-weight: 600;
  background-color: #ffe4e6;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  display: inline-block;
}


/* === Category extras: reviews + categories === */
.cshop-extras{margin-top:2rem;margin-bottom:3rem;border-top:1px solid rgba(0,0,0,.06);padding-top:1.25rem}

/* Center the reviews + category links block within the page.  The inner
   wrapper constrains the content width to match other sections (1200px)
   and auto-centres it.  We also add horizontal padding so the content
   aligns nicely with other page elements. */
.cshop-extras__inner{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:1rem;
  padding-right:1rem;
}
.cshop-extras__title{font-size:1.25rem;font-weight:700;margin:0 0 1rem}
.cshop-extras__reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cshop-review{display:flex;gap:12px;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px;background:#fff}
.cshop-review__thumb img{width:80px;height:80px;object-fit:cover;border-radius:8px}
.cshop-review__meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cshop-review__product a{text-decoration:none}
.cshop-review-link{display:block;text-decoration:none;color:inherit;}
.cshop-review-link:focus{outline:2px solid var(--ring);outline-offset:2px;}
.cshop-review__stars .star{opacity:.35;margin-right:2px}
.cshop-review__stars .star.is-on{opacity:1}
.cshop-review__author{font-size:.85em;color:#555;margin-top:6px}
.cshop-review__by{margin-left:.4rem;}
.cshop-extras__cats{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.cshop-catpill{display:inline-block;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:8px 12px;text-decoration:none;font-size:.95em}
@media (max-width:782px){
  .cshop-extras__reviews{grid-template-columns:1fr}
  .cshop-review__thumb img{width:64px;height:64px}
}
\n
/* Badges and video inside review cards */
.cshop-review__footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;justify-content:center}
.cshop-badge{display:inline-block;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:6px 10px;font-size:.9em}
.cshop-badge.price{font-weight:700}
.cshop-badge.delivery{opacity:.85}
.cshop-review__video{margin-top:10px}

/*
 * Highlight delivery badge for instant products. When a product supports
 * 60‑minute delivery (detected via cshop_is_instant()), the delivery
 * meta span receives the class .cshop-delivery-instant. We apply
 * a light red background, subtle border and fully rounded corners
 * along with bold, dark red text to draw attention to the fast
 * delivery option. Padding ensures the timer icon and text sit
 * comfortably inside the bubble.
 */
.cshop-delivery-instant{
  background-color:#fef2f2;
  border:1px solid #fecaca;
  border-radius:999px;
  padding:0.1rem 0.5rem;
  color:#b91c1c;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
}

/* ========================================================================
 * Custom slider configuration for How‑to cards and Shop reviews
 *
 * The how‑to section and shop reviews now leverage the same horizontal
 * scrolling slider used by product carousels.  To control how many
 * items are visible at a time we set the `--cols` CSS variable on
 * these specific containers.  Fractional values allow a “peek” of
 * the next slide.  These overrides do not affect other sliders.
 */

/* How‑to order cards: show 3 cards on desktops and 1½ cards on
   narrow viewports.  Because there are exactly 3 steps, a full row
   on wider screens maintains visual balance. */
.cshop-how-slider{
  --cols: 3;
}
@media (max-width:580px){
  .cshop-how-slider{
    --cols: 1.5;
  }
}

/* Shop reviews carousel: display 3½ reviews on desktops/tablets and
   2½ reviews on phones.  This matches the design requirement for
   showing a partial card to hint at more content. */
/* Shop reviews carousel: default to 3.5 slides on large screens.  On
   smaller viewports we reduce to 1.5 slides to give each card more
   space and prevent the content appearing cramped. */
.cshop-review-slider{
  --cols: 3.5;
}
@media (max-width:580px){
  .cshop-review-slider{
    --cols: 1.5;
  }
}