/*
 * LetzShopy Store Design CSS — Batch 2 Split
 * File: letzshopy-collections.css
 *
 * Source:
 * - Derived from tested letzshopy-store-design-batch1-clean.css
 *
 * Load scope:
 * - Dedicated Collections page only
 *
 * IMPORTANT:
 * - Keep Customizer > Additional CSS only for :root colour variables.
 * - Shared motif SVG variables live in letzshopy-store-core.css.
 * - This file is intentionally not minified yet.
 */

/* =========================================================
   LETZSHOPPY COLLECTIONS PAGE — SEO + CATEGORY CARDS V2.1
   Dynamic WooCommerce category grid

   Shortcode:
   [ls_collections_grid]

   Responsive plan:
   Desktop: 5 columns
   Tablet:  3 columns
   Mobile:  2 columns

   Colour ownership:
   Existing LetzShopy global tokens only
========================================================= */


/* =========================================================
   1. PAGE SHELL
========================================================= */

.ls-collections-page{
  width:calc(100% - 48px);
  max-width:1220px;
  margin:56px auto 72px;
}


/* =========================================================
   2. PREMIUM INTRO
========================================================= */

.ls-collections-intro{
  width:100%;
  max-width:760px;

  margin:0 auto 38px;

  text-align:center;
}

.ls-collections-intro-kicker{
  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:240px;

  margin:0 auto 10px;
  padding:44px 0 34px;

  color:var(--ls-store-gold-dark);

  font-size:11px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-align:center;
}

.ls-collections-intro-kicker::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:220px;
  height:38px;

  transform:translateX(-50%);

  background:var(--ls-store-gold-dark);

  -webkit-mask-image:var(--ls-motif-lotus-line);
  mask-image:var(--ls-motif-lotus-line);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:220px 38px;
  mask-size:220px 38px;
}

.ls-collections-intro-kicker::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:0;

  width:205px;
  height:27px;

  transform:translateX(-50%);

  background:var(--ls-store-gold-dark);

  -webkit-mask-image:var(--ls-motif-floral-divider);
  mask-image:var(--ls-motif-floral-divider);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:205px 27px;
  mask-size:205px 27px;
}

.ls-collections-intro-title{
  margin:0;

  color:var(--ls-store-heading);

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(38px,4vw,58px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.025em;
}

.ls-collections-intro-copy{
  max-width:620px;

  margin:14px auto 0;

  color:var(--ls-store-text);

  font-size:16px;
  line-height:1.6;
  font-weight:500;
}


/* =========================================================
   3. GRID
========================================================= */

.ls-collections-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));

  gap:22px 18px;

  width:100%;
}


/* =========================================================
   4. CATEGORY CARD
========================================================= */

.ls-collection-card{
  min-width:0;
  margin:0;
}

.ls-collection-card-link{
  position:relative;

  display:flex;
  flex-direction:column;

  width:100%;
  height:100%;

  overflow:hidden;

  color:inherit;
  text-decoration:none;

  background:
    color-mix(
      in srgb,
      var(--ls-store-primary) 4%,
      var(--ls-store-bg-inner)
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 24%,
      var(--ls-store-border-soft)
    );

  border-radius:24px;

  box-shadow:
    0 10px 28px
    rgba(var(--ls-store-shadow-rgb),.07);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.ls-collection-card-link:hover,
.ls-collection-card-link:focus-visible{
  color:inherit;
  text-decoration:none;

  transform:translateY(-4px);

  border-color:
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 52%,
      var(--ls-store-border-soft)
    );

  box-shadow:
    0 18px 38px
    rgba(var(--ls-store-shadow-rgb),.12);
}


/* =========================================================
   5. CATEGORY IMAGE
========================================================= */

.ls-collection-card-media{
  position:relative;

  width:100%;

  aspect-ratio:4 / 5;

  overflow:hidden;

  background:
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 5%,
      var(--ls-store-bg-inner)
    );
}

.ls-collection-card-image{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  margin:0;

  transition:transform .42s ease;
}

.ls-collection-card-link:hover .ls-collection-card-image,
.ls-collection-card-link:focus-visible .ls-collection-card-image{
  transform:scale(1.035);
}


/* =========================================================
   6. CARD COPY — TITLE + DESCRIPTION + PRODUCT COUNT
========================================================= */

.ls-collection-card-body{
  position:relative;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:flex-start;
  min-height:190px;
  padding:17px 18px 18px;
}

.ls-collection-card-title{
  display:-webkit-box;
  width:100%;
  margin:0 0 9px;
  overflow:hidden;
  color:var(--ls-store-heading);
  font-size:17px;
  line-height:1.28;
  font-weight:800;
  letter-spacing:-.01em;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.ls-collection-card-description{
  display:-webkit-box;
  width:100%;
  margin:0 0 14px;
  overflow:hidden;
  color:var(--ls-store-text);
  font-size:12.5px;
  line-height:1.55;
  font-weight:500;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
}

.ls-collection-card-meta{
  width:100%;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ls-collection-card-count{
  display:inline-block;
  color:var(--ls-store-primary);
  font-size:11.5px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:.035em;
}

.ls-collection-card-arrow{
  position:static;
  flex:0 0 auto;
  color:var(--ls-store-gold-dark);
  font-size:21px;
  line-height:1;
  font-weight:500;
  transition:
    transform .22s ease,
    color .22s ease;
}

.ls-collection-card-link:hover .ls-collection-card-arrow,
.ls-collection-card-link:focus-visible .ls-collection-card-arrow{
  color:var(--ls-store-primary-hover);
  transform:translateX(4px);
}

.ls-collection-card-media__empty{
  display:block;
  width:100%;
  height:100%;
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb,var(--ls-store-gold-dark) 12%,transparent),
      transparent 34%
    ),
    var(--ls-store-card-muted);
}


/* =========================================================
   6A. SAVED SEO EDITORIAL CONTENT
========================================================= */

body.ls-collections-seo-page .entry-content>.ls-collections-editorial,
body.ls-collections-seo-page .entry-content>.ls-collections-seo-outro{
  width:calc(100% - 48px);
  max-width:1220px;
  margin-left:auto;
  margin-right:auto;
}

.ls-collections-editorial{
  position:relative;
  margin-top:36px;
  margin-bottom:18px;
  padding:44px 48px;
  overflow:hidden;
  border:1px solid
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 28%,
      var(--ls-store-border-soft)
    );
  border-radius:32px;
  background:
    radial-gradient(
      circle at 92% 5%,
      color-mix(in srgb,var(--ls-store-gold-dark) 8%,transparent),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--ls-store-bg-inner),
      color-mix(
        in srgb,
        var(--ls-store-bg-soft) 68%,
        var(--ls-store-bg-inner)
      )
    );
  box-shadow:0 22px 54px rgba(var(--ls-store-shadow-rgb),.09);
}

.ls-collections-editorial::after{
  content:"";
  position:absolute;
  right:-62px;
  top:-62px;
  width:220px;
  height:220px;
  border:2px solid
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 12%,
      transparent
    );
  border-radius:50%;
  pointer-events:none;
}

.ls-collections-editorial__eyebrow,
.ls-collections-editorial__guide>span{
  position:relative;
  z-index:2;
  display:block;
  margin:0 0 10px;
  color:var(--ls-store-primary);
  font-size:10.5px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.ls-collections-editorial>h2{
  position:relative;
  z-index:2;
  max-width:880px;
  margin:0 0 18px;
  color:var(--ls-store-heading);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(38px,4.2vw,58px);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-.03em;
}

.ls-collections-editorial p{
  position:relative;
  z-index:2;
  margin:0 0 15px;
  color:var(--ls-store-text);
  font-size:15px;
  line-height:1.76;
  font-weight:500;
}

.ls-collections-editorial__lead{
  max-width:1020px;
  color:var(--ls-store-heading);
  font-size:17px!important;
  line-height:1.72!important;
}

.ls-collections-editorial__lead strong{
  color:var(--ls-store-primary);
}

.ls-collections-editorial a,
.ls-collections-seo-outro a{
  color:var(--ls-store-primary);
  font-weight:800;
  text-decoration:underline;
  text-decoration-color:
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 58%,
      transparent
    );
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.ls-collections-editorial a:hover,
.ls-collections-editorial a:focus,
.ls-collections-seo-outro a:hover,
.ls-collections-seo-outro a:focus{
  color:var(--ls-store-primary-hover);
  text-decoration-color:currentColor;
}

.ls-collections-editorial__guide{
  position:relative;
  z-index:2;
  margin:28px 0 0;
  padding:28px 30px;
  border-left:4px solid var(--ls-store-gold-dark);
  border-radius:0 22px 22px 0;
  background:
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 5%,
      var(--ls-store-bg-inner)
    );
}

.ls-collections-editorial__guide h3{
  margin:0 0 12px;
  color:var(--ls-store-heading);
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.018em;
}

.ls-collections-editorial__links{
  margin-top:19px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}

.ls-collections-editorial__links a{
  min-height:38px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 40%,
      var(--ls-store-border-soft)
    );
  border-radius:999px;
  background:var(--ls-store-bg-inner);
  color:var(--ls-store-heading);
  box-shadow:0 7px 18px rgba(var(--ls-store-shadow-rgb),.06);
  font-size:11px;
  line-height:1;
  font-weight:800;
  text-decoration:none;
}

.ls-collections-editorial__links a:hover,
.ls-collections-editorial__links a:focus{
  border-color:var(--ls-store-primary);
  background:var(--ls-store-primary);
  color:var(--ls-store-white);
}

.ls-collections-seo-outro{
  position:relative;
  margin-top:18px;
  margin-bottom:72px;
  padding:40px 44px;
  overflow:hidden;
  border:1px solid
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 42%,
      rgba(var(--ls-store-white-rgb),.12)
    );
  border-radius:30px;
  background:
    radial-gradient(
      circle at 12% 12%,
      color-mix(in srgb,var(--ls-store-primary) 16%,transparent),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--ls-store-dark),
      var(--ls-store-dark-soft)
    );
  box-shadow:0 24px 58px rgba(var(--ls-store-black-rgb),.18);
}

.ls-collections-seo-outro::after{
  content:"";
  position:absolute;
  right:-54px;
  bottom:-68px;
  width:230px;
  height:230px;
  background:
    color-mix(
      in srgb,
      var(--ls-store-gold-dark) 13%,
      transparent
    );
  -webkit-mask-image:var(--ls-motif-lotus-watermark);
  mask-image:var(--ls-motif-lotus-watermark);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  pointer-events:none;
}

.ls-collections-seo-outro__kicker{
  position:relative;
  z-index:2;
  display:block;
  margin:0 0 9px;
  color:var(--ls-store-gold-dark);
  font-size:10px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.ls-collections-seo-outro h2{
  position:relative;
  z-index:2;
  max-width:880px;
  margin:0 0 16px;
  color:var(--ls-store-bg-inner);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(32px,3.6vw,48px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.026em;
}

.ls-collections-seo-outro p{
  position:relative;
  z-index:2;
  max-width:1000px;
  margin:0 0 14px;
  color:
    color-mix(
      in srgb,
      var(--ls-store-bg-inner) 80%,
      transparent
    );
  font-size:14px;
  line-height:1.75;
  font-weight:500;
}

.ls-collections-seo-outro a{
  color:var(--ls-store-gold-dark);
}

/* =========================================================
   7. EMPTY STATE
========================================================= */

.ls-collections-grid-empty{
  width:calc(100% - 48px);
  max-width:1220px;

  margin:56px auto 72px;
  padding:40px;

  color:var(--ls-store-text);
  text-align:center;

  background:var(--ls-store-bg-inner);

  border:
    1px solid
    var(--ls-store-border-soft);

  border-radius:24px;
}


/* =========================================================
   8. TABLET — 3 COLUMNS
========================================================= */

@media (min-width:768px) and (max-width:1024px){

  .ls-collections-page{
    width:calc(100% - 40px);
    margin:46px auto 60px;
  }

  .ls-collections-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
  }

  .ls-collections-intro{
    margin-bottom:32px;
  }

  .ls-collection-card-title{
    font-size:16px;
  }

  .ls-collection-card-body{
    min-height:184px;
  }

  body.ls-collections-seo-page .entry-content>.ls-collections-editorial,
  body.ls-collections-seo-page .entry-content>.ls-collections-seo-outro{
    width:calc(100% - 40px);
  }

  .ls-collections-editorial{
    padding:38px 34px;
  }
}


/* =========================================================
   9. MOBILE — 2 COLUMNS
========================================================= */

@media (max-width:767px){

  .ls-collections-page{
    width:calc(100% - 24px);
    margin:32px auto 48px;
  }

  .ls-collections-intro{
    margin-bottom:26px;
  }

  .ls-collections-intro-kicker{
    min-width:178px;

    padding:34px 0 27px;

    font-size:9px;
    letter-spacing:.17em;
  }

  .ls-collections-intro-kicker::before{
    width:158px;
    height:28px;

    -webkit-mask-size:158px 28px;
    mask-size:158px 28px;
  }

  .ls-collections-intro-kicker::after{
    width:152px;
    height:20px;

    -webkit-mask-size:152px 20px;
    mask-size:152px 20px;
  }

  .ls-collections-intro-title{
    font-size:34px;
    line-height:1.04;
  }

  .ls-collections-intro-copy{
    margin-top:11px;

    font-size:13.5px;
    line-height:1.55;
  }

  .ls-collections-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:14px 12px;
  }

  .ls-collection-card-link{
    border-radius:18px;
  }

  .ls-collection-card-media{
    aspect-ratio:4 / 5;
  }

  .ls-collection-card-body{
    min-height:176px;
    padding:13px 12px 14px;
  }

  .ls-collection-card-title{
    margin-bottom:7px;
    font-size:14px;
    line-height:1.25;
  }

  .ls-collection-card-description{
    margin-bottom:11px;
    font-size:11px;
    line-height:1.48;
    -webkit-line-clamp:5;
  }

  .ls-collection-card-count{
    font-size:10px;
    letter-spacing:.015em;
  }

  .ls-collection-card-arrow{
    font-size:18px;
  }

  body.ls-collections-seo-page .entry-content>.ls-collections-editorial,
  body.ls-collections-seo-page .entry-content>.ls-collections-seo-outro{
    width:calc(100% - 24px);
    max-width:430px;
  }

  .ls-collections-editorial{
    margin-top:24px;
    margin-bottom:8px;
    padding:30px 22px;
    border-radius:25px;
  }

  .ls-collections-editorial>h2{
    font-size:36px;
  }

  .ls-collections-editorial__lead{
    font-size:15.5px!important;
  }

  .ls-collections-editorial p{
    font-size:13.5px;
    line-height:1.68;
  }

  .ls-collections-editorial__guide{
    margin-top:22px;
    padding:23px 20px;
    border-radius:0 19px 19px 0;
  }

  .ls-collections-editorial__guide h3{
    font-size:26px;
  }

  .ls-collections-editorial__links{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:8px;
  }

  .ls-collections-editorial__links a{
    width:100%;
    min-height:44px;
    padding:10px 14px;
    justify-content:flex-start;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:left;
    font-size:11px;
    line-height:1.35;
  }

  .ls-collections-seo-outro{
    margin-top:8px;
    margin-bottom:52px;
    padding:31px 22px;
    border-radius:24px;
  }

  .ls-collections-seo-outro h2{
    font-size:34px;
  }

  .ls-collections-seo-outro p{
    font-size:13.5px;
    line-height:1.67;
  }
}


/* =========================================================
   10. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .ls-collection-card-link,
  .ls-collection-card-image,
  .ls-collection-card-arrow{
    transition:none;
  }

  .ls-collection-card-link:hover,
  .ls-collection-card-link:focus-visible,
  .ls-collection-card-link:hover .ls-collection-card-image,
  .ls-collection-card-link:focus-visible .ls-collection-card-image{
    transform:none;
  }
}



/* =========================================================
   V1.1 — CLEAN HEADING HIERARCHY
   Page title → one grid heading → cards → detailed SEO copy
========================================================= */

body.ls-collections-seo-page .ls-collections-editorial--details{
  margin-top:18px;
}

body.ls-collections-seo-page .ls-collections-editorial--details::before{
  content:"";
  display:block;
  width:72px;
  height:1px;
  margin:0 0 22px;
  background:
    linear-gradient(
      90deg,
      var(--ls-store-gold-dark),
      transparent
    );
}

body.ls-collections-seo-page .ls-collections-seo-social{
  margin-top:18px;
}

@media (max-width:767px){
  body.ls-collections-seo-page .ls-collections-editorial--details{
    margin-top:8px;
  }

  body.ls-collections-seo-page .ls-collections-editorial--details::before{
    width:54px;
    margin-bottom:18px;
  }
}

/* =========================================================
   END: V1.1 CLEAN HEADING HIERARCHY
========================================================= */

/* =========================================================
   END FILE: LETZSHOPY COLLECTIONS PAGE
========================================================= */