/*
Theme Name: ARDEN Child
Theme URI: https://ardencolorme.com/
Description: ARDEN Color-Me child theme for Twenty Twenty-Five. Carries the approved ARDEN editorial design system into the WooCommerce collection, listing and product surfaces. No page builder.
Author: ARDEN TEXTILE LTD STI
Template: arden-color-me
Version: 1.0.0
Text Domain: arden-child
*/

/* ============================================================
   ARDEN BRAND DNA
   Tokens copied verbatim from the approved flagship pages
   (arden-corporate-bandanas.html / arden-resort-kids-clubs.html).
   Do not redefine these anywhere else.
   ============================================================ */
:root{
  --purple:#7C2D96; --purple-deep:#571F69;
  --gold:#F0A202; --gold-deep:#C77F00;
  --cream:#FDF4E3; --lavender:#EBD6F7;
  --charcoal:#2E1F35;
  --turquoise:#00B8A9; --coral:#F0533D; --green:#6DBE45; --sky:#2E8FD4; --sun:#FFC93C;
  --serif:'Fraunces', serif; --playful:'Baloo 2', sans-serif; --sans:'Inter', sans-serif; --script:'Caveat', cursive;
  --line: rgba(46,31,53,.12);
  /* Added for the .pwin sales-list card, ported verbatim from
     site-prototype/css/style.css so the card renders with pixel fidelity
     to the approved system. */
  --ink-mute:#7a6a82;
  --corp-ivory:#FDFBF6;
  --corp-paper:#F6F1E6;
  --corp-aubergine:#4A1252;
  --corp-hairline: rgba(143,115,0,.32);
}

body.arden-catalog{font-family:var(--sans); color:var(--charcoal); background:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
.arden-catalog .wrap{max-width:1360px; margin:0 auto; padding:0 6vw;}
.arden-catalog .pad{padding:40px 0 120px;}
.arden-catalog a{color:inherit; text-decoration:none;}

/* ---------- section head (flagship language) ---------- */
.arden-catalog .section-head{max-width:700px; margin-bottom:44px;}
.arden-catalog .section-head .kick{font-family:var(--script); font-size:26px; color:var(--coral);}
.arden-catalog .section-head .kick::before{content:''; display:inline-block; width:8px; height:8px; background:var(--sun); border-radius:50%; margin-right:9px; vertical-align:middle;}
.arden-catalog .section-head h1{font-family:var(--playful); font-weight:800; font-size:clamp(28px,3.4vw,42px); color:var(--purple-deep); margin-top:6px;}
.arden-catalog .section-head p{font-size:15.5px; color:#5a4a62; margin-top:14px; max-width:640px;}

/* ---------- breadcrumb ---------- */
.arden-crumb{font-size:12.5px; color:#7a6a82; padding:26px 0 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.arden-crumb a{border-bottom:1px solid var(--line);}
.arden-crumb a:hover{color:var(--purple); border-color:var(--purple);}
.arden-crumb .sep{opacity:.45;}
.arden-crumb .current{font-weight:600; color:var(--purple-deep);}

/* ---------- filters ---------- */
.arden-filters{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 40px;}
.arden-filters .arden-filter-group{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.arden-filters .arden-filter-label{font-family:var(--playful); font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:#7a6a82; margin-right:2px;}
.arden-chip{display:inline-block; font-family:var(--playful); font-weight:700; font-size:12.5px; padding:9px 17px; border-radius:999px; background:#fff; color:var(--purple-deep); box-shadow:inset 0 0 0 1px var(--line); transition:transform .2s ease, box-shadow .2s ease;}
.arden-chip:hover{transform:translateY(-2px);}
.arden-chip.is-active{background:var(--purple); color:#fff; box-shadow:none;}
.arden-chip.chip-bw{background:linear-gradient(135deg,#FFFFFF,#E4DCEC); color:var(--purple-deep);}
.arden-chip.chip-half{background:linear-gradient(135deg,#A8E8E0,#5FCFC0); color:#0A5C52;}
.arden-chip.chip-full{background:linear-gradient(135deg,#FBE0A8,#F0C05A); color:#6B4A00;}
.arden-chip.chip-bw.is-active{box-shadow:0 0 0 2.5px var(--purple-deep);}
.arden-chip.chip-half.is-active{box-shadow:0 0 0 2.5px #0A5C52;}
.arden-chip.chip-full.is-active{box-shadow:0 0 0 2.5px var(--gold-deep);}

/* generic grid utility — used by page-signature-collection.php's own
   two-column "what is included" layout (via an inline grid-template-columns).
   The product listing grid is .pwingrid below, not this. */
.arden-grid{display:grid;}

/* ---------- photo frame family — same proportions, varied colour (never
   all pink); used by .pwin below and reusable elsewhere ---------- */
.photo-frame{padding:14px; border-radius:32px; width:100%; background:linear-gradient(135deg,#F5C9DD,#EFA9C8);}
.photo-frame.pf-turq{background:linear-gradient(135deg,#A8E8E0,#5FCFC0);}
.photo-frame.pf-gold{background:linear-gradient(135deg,#FBE0A8,#F0C05A);}
.photo-frame.pf-coral{background:linear-gradient(135deg,#F5B8A8,#E88264);}
.photo-frame.pf-mint{background:linear-gradient(135deg,#C5E8C0,#8FCF80);}
.photo-frame.pf-sand{background:linear-gradient(135deg,#F3E7D3,#E0CBA8);}
.photo-frame.pf-navy{background:linear-gradient(135deg,#A9C2DE,#5E82AC);}
.frame-inner{border-radius:22px; width:100%; aspect-ratio:4/5; overflow:hidden; display:block;}
.frame-inner img{width:100%; height:100%; object-fit:cover; display:block;}
.placeholder-box{background:var(--cream); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(46,31,53,.1);}
.placeholder-box .label{font-family:var(--sans); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#b8a8c4; text-align:center; padding:0 8%; line-height:1.6;}

/* ============================================================
   ARDEN CANONICAL SALES-LIST CARD (.pwin)
   Ported verbatim from site-prototype/css/style.css so every listing
   renders the same approved card used sitewide (Corporate, Kids, Sports,
   Celebrations, Holiday, Hospitality). Source order preserved — later
   rules intentionally override earlier ones, exactly as on the live site.
   ============================================================ */
.pwingrid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch; grid-auto-rows:1fr;}
.pwingrid + .pwingrid{margin-top:38px;}
.pwin{display:flex; flex-direction:column; min-width:0;}

/* the .pf-* gradient variants are neutralized inside .pwin — a flat ivory
   frame, never a colored per-collection mat. Only the product photo and
   name tell one collection apart from another. */
.pwin .photo-frame,
.pwin .photo-frame.pf-turq,
.pwin .photo-frame.pf-gold,
.pwin .photo-frame.pf-coral,
.pwin .photo-frame.pf-mint,
.pwin .photo-frame.pf-sand,
.pwin .photo-frame.pf-navy{
  background:var(--corp-paper); padding:0; border-radius:6px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.pwin .photo-frame .frame-inner{border-radius:6px;}
a.pwin:hover .photo-frame{transform:none; box-shadow:0 14px 26px -18px rgba(46,31,53,.4);}
a.pwin:hover .pwin-art{box-shadow:inset 0 0 0 1px var(--gold-deep);}
.pwin-art{border-radius:6px; overflow:hidden; aspect-ratio:1; background:#fff;
  box-shadow:inset 0 0 0 1px var(--corp-hairline); position:relative;}
.pwin-art img{width:100%; height:100%; object-fit:cover; display:block;}
.pwin-art .placeholder-box{width:100%; height:100%;}
.pwin-body{padding:14px 4px 0; display:flex; flex-direction:column; flex:1;}
.pwin{height:100%;}
.pwin .photo-frame{display:flex; flex-direction:column; flex:0 0 auto;}
.pwin .photo-frame .frame-inner.pwin-art{aspect-ratio:1; height:auto; min-height:0; flex:0 0 auto;}

@media (max-width:1100px){ .pwingrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){  .pwingrid{grid-template-columns:repeat(2,1fr); gap:16px;} }
@media (max-width:400px){  .pwingrid{grid-template-columns:1fr; gap:18px;} }
@media (max-width:900px){ .pwin-cta{min-height:44px; display:inline-flex; align-items:center;} }

.pwin-sizes{font-size:11.5px; color:var(--ink-mute); margin-top:2px;}

/* --- real product: the strongest object on the page --- */
.pwin.is-real .photo-frame{box-shadow:0 10px 20px -16px rgba(46,31,53,.32);}
.pwin .pwin-flag{position:absolute; top:10px; left:10px; z-index:3;
  display:inline-flex; align-items:center; gap:8px; margin:0;
  font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--corp-aubergine); background:var(--corp-ivory);
  padding:6px 10px 6px 8px; border-radius:2px;
  box-shadow:0 4px 10px -6px rgba(46,31,53,.3);}
.pwin-flag::before{content:''; width:14px; height:2px; border-radius:0; background:var(--gold-deep);}

/* --- commercial hierarchy: status → image → collection → name → size →
   cm → four-size system → one starting price → MOQ → CTA --- */
.pwin-coll{font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 5px;}
.pwin-name{font-family:var(--serif); font-weight:600; font-size:16px; line-height:1.18;
  color:var(--purple-deep); letter-spacing:-.01em;}
.pwin-variant{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-top:8px;}
.pwin-variant-label{font-family:var(--sans); font-weight:700; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); margin-right:2px;}
.pwin-variant-opt{font-family:var(--sans); font-weight:600; font-size:11.5px; color:var(--ink-mute);}
.pwin-variant-opt.is-active{color:var(--corp-aubergine); font-weight:700;
  border-bottom:1.5px solid var(--gold-deep); padding-bottom:1px;}
.pwin-variant-sep{color:var(--line); font-size:11px;}
.pwin-size{font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--corp-aubergine);
  letter-spacing:.01em; margin-top:8px;}
.pwin-unit{font-size:10.5px; font-weight:500; color:var(--ink-mute); text-transform:lowercase; margin-left:1px;}
.pwin-cm{font-family:var(--sans); font-weight:700; font-size:10px; color:var(--ink-mute); margin-top:2px;}
.pwin-sizerow{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:4px;}
.pwin-price{font-family:var(--sans); font-weight:700; font-size:22px; line-height:1;
  color:var(--purple-deep); margin-top:12px;}
.pwin-price span{font-family:var(--sans); font-weight:400; font-size:12px; color:var(--ink-mute);}
.pwin-moq{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.02em;
  color:var(--corp-aubergine); margin-top:10px; flex:1;}
.pwin-cta{margin-top:12px; font-family:var(--sans); font-weight:700; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--corp-aubergine);
  border-bottom:2px solid var(--gold-deep); padding-bottom:2px; align-self:flex-start;}

/* ---------- volume price table (product page only) ---------- */
.arden-volume{margin:30px 0; background:#fff; border-radius:22px; padding:26px 28px; box-shadow:0 16px 34px -28px rgba(46,31,53,.4); overflow-x:auto;}
.arden-volume-head{font-family:var(--playful); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--purple-deep); margin-bottom:14px;}
.arden-volume-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:380px;}
.arden-volume-table th,.arden-volume-table td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--line);}
.arden-volume-table thead th{font-family:var(--playful); font-weight:700; font-size:12px; color:var(--purple-deep); text-transform:uppercase; letter-spacing:.04em;}
.arden-volume-table tbody td:first-child{font-weight:700; color:#5a4a62;}
.arden-volume-table tbody tr:last-child td{border-bottom:none; font-weight:700; color:var(--gold-deep);}
.arden-volume-note{font-size:12.5px; color:#7a6a82; margin-top:14px;}

/* ---------- launch offer band ---------- */
.arden-launch{background:linear-gradient(120deg,var(--gold),var(--gold-deep)); border-radius:20px; padding:22px 28px; margin:0 0 40px; text-align:center;}
.arden-launch .al-title{font-family:var(--playful); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--purple-deep); opacity:.8;}
.arden-launch .al-offer{font-family:var(--playful); font-weight:800; font-size:clamp(19px,2.3vw,26px); color:var(--purple-deep); margin-top:5px;}
.arden-launch .al-note{font-size:12.5px; color:var(--purple-deep); opacity:.85; margin-top:6px;}

/* ---------- empty state (catalog not yet populated) ---------- */
.arden-empty{background:#fff; border-radius:28px; padding:64px 8%; text-align:center; box-shadow:0 18px 40px -30px rgba(46,31,53,.35);}
.arden-empty h2{font-family:var(--playful); font-weight:800; font-size:24px; color:var(--purple-deep);}
.arden-empty p{font-size:15px; color:#5a4a62; margin-top:12px; max-width:520px; margin-left:auto; margin-right:auto;}

/* ---------- buttons (flagship language) ---------- */
.arden-catalog .btn{font-family:var(--playful); font-weight:700; font-size:15px; border-radius:999px; padding:16px 30px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .25s ease;}
.arden-catalog .btn:hover{transform:translateY(-2px);}
.arden-catalog .btn-gold{background:var(--gold); color:var(--purple-deep); box-shadow:0 12px 26px -10px rgba(240,162,2,.5);}
.arden-catalog .btn-turq{background:var(--turquoise); color:#fff; box-shadow:0 12px 26px -10px rgba(0,184,169,.5);}
.arden-catalog .btn-primary{background:var(--coral); color:#fff; box-shadow:0 12px 26px -10px rgba(240,83,61,.5);}

/* ---------- signature intake ---------- */
.arden-signature-hero{background:linear-gradient(135deg,var(--purple) 0%,var(--purple-deep) 100%); border-radius:44px 26px 44px 26px; padding:clamp(40px,6vw,86px); color:#fff; margin-top:26px;}
.arden-signature-hero .badge{display:inline-block; background:var(--gold); color:var(--purple-deep); font-family:var(--playful); font-weight:800; font-size:12px; letter-spacing:.05em; padding:8px 18px; border-radius:999px;}
.arden-signature-hero .not-ordinary{font-family:var(--script); font-size:clamp(22px,2.6vw,30px); color:var(--gold); margin-top:20px;}
.arden-signature-hero h1{font-family:var(--playful); font-weight:800; font-size:clamp(30px,4vw,52px); margin-top:10px; line-height:1.1;}
.arden-signature-hero p{font-size:16px; margin-top:18px; max-width:560px; color:rgba(255,255,255,.9);}
.arden-journey{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:56px 0 0;}
.arden-journey .aj-step{background:#fff; border-radius:14px; padding:14px 18px; font-family:var(--playful); font-weight:700; font-size:13px; color:var(--purple-deep); box-shadow:0 14px 30px -24px rgba(46,31,53,.4);}
.arden-journey .aj-arrow{color:var(--gold-deep); font-size:17px;}

/* ============================================================
   RESPONSIVE — single breakpoint, matching the flagship system
   ============================================================ */
@media (max-width:900px){
  .arden-catalog .pad{padding:26px 0 76px;}
  .arden-filters{gap:8px;}
  .arden-signature-hero{border-radius:30px 20px 30px 20px;}
  .arden-journey{flex-direction:column; align-items:stretch;}
  .arden-journey .aj-step{text-align:center;}
  .arden-journey .aj-arrow{text-align:center; transform:rotate(90deg);}
}