/* ════════════════════════════════════════════════════
   ABAYA KLOSETTE — COLLECTIONS LANDING PAGE
   Enqueued via child theme functions.php
════════════════════════════════════════════════════ */

/* ════════════════════════════════════
   DIAMOND UTILITIES
════════════════════════════════════ */
.cf-dia { 
    width: 5px; height: 5px; background: #C9972A; 
    transform: rotate(45deg); flex-shrink: 0; display: inline-block; 
}
.cf-dia-sm { 
    width: 3px; height: 3px; background: #C9972A; 
    transform: rotate(45deg); flex-shrink: 0; display: inline-block; opacity: 0.4; 
}

/* ════════════════════════════════════
   PAGE WRAPPER
════════════════════════════════════ */
#ak-collections-page {
  background: #0d0d0d;
  width: 100%;
}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.ak-coll-page-hero {
  width: 100%; min-height: 55vh;
  background: #0d0d0d;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ak-coll-page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 35%;
  background-color: #0d0d0d;
}
.ak-coll-page-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,13,13,0.38) 0%, rgba(13,13,13,0.78) 100%);
}
.ak-coll-page-hero-content {
  position: relative; z-index: 2;
  text-align: center; padding: 80px 48px;
  max-width: 680px; width: 100%;
}
.ak-coll-page-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 400; letter-spacing: 0.36em;
  color: #C9972A; text-transform: uppercase;
  display: block; margin-bottom: 1.6rem;
  animation: akcp-fadeUp 0.7s 0.2s ease both;
}
.ak-coll-page-rule {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  margin-bottom: 2rem;
  animation: akcp-fadeUp 0.6s 0.35s ease both;
}
.ak-coll-page-rule-line {
  height: 0.5px; background: #C9972A;
  animation: akcp-growLine 1.2s 0.5s ease both;
}
.ak-coll-page-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(42px, 6vw, 72px) !important;
  font-weight: 300 !important; line-height: 1.05 !important;
  color: #fff !important; margin-bottom: 1rem !important;
  animation: akcp-fadeUp 0.8s 0.55s ease both;
}
.ak-coll-page-title em { color: #C9972A; font-style: italic; }
.ak-coll-page-sub {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(15px, 1.8vw, 20px) !important;
  font-weight: 500 !important; font-style: italic !important;
  color: rgba(255,255,255,0.90) !important; line-height: 1.6 !important;
  animation: akcp-fadeUp 0.7s 0.75s ease both;
}
.ak-coll-page-hero-corner {
  position: absolute; width: 26px; height: 26px;
  border-color: rgba(201,151,42,0.22); border-style: solid;
}
.ak-cpc-tl { top: 22px; left: 22px; border-width: 0.5px 0 0 0.5px; }
.ak-cpc-tr { top: 22px; right: 22px; border-width: 0.5px 0.5px 0 0; }
.ak-cpc-bl { bottom: 22px; left: 22px; border-width: 0 0 0.5px 0.5px; }
.ak-cpc-br { bottom: 22px; right: 22px; border-width: 0 0.5px 0.5px 0; }

/* ════════════════════════════════════
   INTRO STRIP
════════════════════════════════════ */
.ak-coll-page-intro {
  background: #0d0d0d;
  padding: 64px 60px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border-top: 0.5px solid rgba(201,151,42,0.12);
  border-bottom: 0.5px solid rgba(201,151,42,0.12);
}
.ak-coll-page-intro-item {
  padding: 0 48px; text-align: center; position: relative;
}
.ak-coll-page-intro-item + .ak-coll-page-intro-item::before {
  content: ''; position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 0.5px; background: rgba(201,151,42,0.15);
}
.ak-coll-intro-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px; font-weight: 300; line-height: 0.9;
  color: rgba(201,151,42,0.2); display: block; margin-bottom: 12px;
  letter-spacing: -0.02em; user-select: none;
}
.ak-coll-intro-name {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(18px, 1.8vw, 24px) !important;
  font-weight: 300 !important; font-style: italic !important;
  color: #fff !important; display: block; margin-bottom: 10px;
}
.ak-coll-intro-desc {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important; font-weight: 300 !important;
  letter-spacing: 0.07em !important; color: rgba(255,255,255,0.3) !important;
  line-height: 1.8 !important;
}

/* ════════════════════════════════════
   COLLECTION DETAIL CARDS
════════════════════════════════════ */
.ak-coll-page-cards {
  display: flex; flex-direction: column; gap: 4px;
  padding: 80px 48px; background: #0d0d0d;
}

/* ── Single card row ── */
.ak-coll-page-card-row {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 520px; overflow: hidden;
}
/* Reverse layout for even rows */
.ak-coll-page-card-row.ak-coll-even {
  direction: rtl;
}
.ak-coll-page-card-row.ak-coll-even > * {
  direction: ltr;
}

/* ── Image panel ── */
.ak-coll-card-image-panel {
  position: relative; overflow: hidden;
  background: #1a1a1a; min-height: 420px;
}
.ak-coll-card-img-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #1a1a1a;
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: transform;
}
.ak-coll-page-card-row:hover .ak-coll-card-img-bg { transform: scale(1.04); }
.ak-coll-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(201,151,42,0.18) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.5s ease;
}
.ak-coll-page-card-row:hover .ak-coll-card-img-overlay { opacity: 1; }
.ak-coll-card-img-num {
  position: absolute; top: 28px; left: 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; font-weight: 300; letter-spacing: 0.28em;
  color: rgba(201,151,42,0.6); text-transform: uppercase; z-index: 2;
}
.ak-coll-card-img-accent {
  position: absolute; top: 0; right: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, transparent 0%, #C9972A 25%, #C9972A 75%, transparent 100%);
  opacity: 0.55;
}
.ak-coll-even .ak-coll-card-img-accent { right: auto; left: 0; }

/* Product count badge */
.ak-coll-card-count-badge {
  position: absolute; bottom: 28px; left: 28px; z-index: 2;
  background: #0d0d0d; border: 0.5px solid rgba(201,151,42,0.35);
  padding: 12px 18px;
}
.ak-coll-card-count-badge .count-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 300; color: #C9972A;
  display: block; line-height: 1;
}
.ak-coll-card-count-badge .count-lbl {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 400; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45); text-transform: uppercase;
  display: block; margin-top: 3px;
}

/* ── Text panel ── */
.ak-coll-card-text-panel {
  background: #111; padding: 72px 64px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.ak-coll-card-text-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 400; letter-spacing: 0.32em;
  color: #C9972A; text-transform: uppercase;
  display: block; margin-bottom: 1.4rem;
}
.ak-coll-card-text-rule {
  display: flex; align-items: center; gap: 10px; margin-bottom: 1.6rem;
}
.ak-coll-card-text-rule-line { height: 0.5px; background: rgba(201,151,42,0.4); width: 52px; }
.ak-coll-card-text-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(30px, 3.2vw, 48px) !important;
  font-weight: 300 !important; line-height: 1.1 !important;
  color: #fff !important; margin-bottom: 10px !important;
}
.ak-coll-card-text-title em { color: #C9972A; font-style: italic; }
.ak-coll-card-text-tagline {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(13px, 1.3vw, 16px) !important;
  font-weight: 300 !important; font-style: italic !important;
  color: rgba(255,255,255,0.38) !important;
  margin-bottom: 1.8rem !important; display: block;
}
.ak-coll-card-text-body {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(11px, 0.95vw, 13px) !important;
  font-weight: 300 !important; line-height: 2 !important;
  color: rgba(255,255,255,0.42) !important;
  margin-bottom: 1.8rem !important; max-width: 420px;
}
.ak-coll-card-text-features {
  list-style: none; margin: 0 0 2.2rem; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ak-coll-card-text-features li {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 300; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.42);
}
.ak-coll-card-text-features li::before {
  content: ''; width: 4px; height: 4px; background: #C9972A;
  transform: rotate(45deg); flex-shrink: 0;
}
.ak-coll-card-text-cta {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important; font-weight: 500 !important;
  letter-spacing: 0.24em !important; text-transform: uppercase !important;
  color: #0d0d0d !important; background: #C9972A !important;
  border: none !important; padding: 14px 32px !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; align-self: flex-start;
  transition: background 0.25s, letter-spacing 0.25s !important;
  cursor: pointer;
}
.ak-coll-card-text-cta:hover { background: #E2B84A !important; letter-spacing: 0.28em !important; }
.ak-coll-card-text-deco {
  position: absolute; bottom: 24px; right: 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 80px; font-weight: 300; font-style: italic;
  color: rgba(255,255,255,0.03); line-height: 1;
  pointer-events: none; user-select: none;
}

/* ════════════════════════════════════
   NEW ARRIVALS
════════════════════════════════════ */
.ak-coll-page-featured {
  padding: 80px 48px; background: #f5f2eb;
}
.ak-coll-page-feat-header {
  text-align: center; margin-bottom: 52px;
}
.ak-coll-feat-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.32em; color: #C9972A;
  text-transform: uppercase; display: block; margin-bottom: 12px;
}
.ak-coll-feat-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 300 !important; color: #0d0d0d !important;
}
.ak-coll-feat-title em { color: #C9972A; font-style: italic; }

/* Product grid */
.ak-coll-feat-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
  margin-bottom: 44px;
}

/* Product card */
.ak-coll-feat-card {
  background: #fff; position: relative; overflow: hidden;
}
.ak-coll-feat-card-link { text-decoration: none !important; display: block; }
.ak-coll-feat-card-img-wrap {
  position: relative; overflow: hidden;
  padding-bottom: 130%; background: #1a1a1a;
}
.ak-coll-feat-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center top;
  transition: transform 0.65s ease;
  display: block;
}
.ak-coll-feat-card-img-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
}
.ak-coll-feat-card:hover .ak-coll-feat-card-img { transform: scale(1.06); }
.ak-coll-feat-card-overlay {
  position: absolute; inset: 0;
  background: rgba(13,13,13,0);
  transition: background 0.4s ease;
  display: flex; align-items: center; justify-content: center;
}
.ak-coll-feat-card:hover .ak-coll-feat-card-overlay { background: rgba(13,13,13,0.42); }
.ak-coll-feat-quick {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: #0d0d0d; background: #C9972A;
  padding: 10px 20px; border: none; cursor: pointer;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-decoration: none !important; display: inline-block;
}
.ak-coll-feat-card:hover .ak-coll-feat-quick { opacity: 1; transform: translateY(0); }
.ak-coll-feat-badge {
  position: absolute; top: 14px; left: 14px;
  background: #C9972A; color: #0d0d0d;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 4px 10px; z-index: 2;
}
.ak-coll-feat-card-info {
  padding: 16px 18px;
}
.ak-coll-feat-card-col {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 400; letter-spacing: 0.2em;
  color: #C9972A; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
.ak-coll-feat-card-name {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(16px, 1.5vw, 19px) !important;
  font-weight: 400 !important; color: #0d0d0d !important;
  display: block; margin-bottom: 6px; line-height: 1.25 !important;
  text-decoration: none !important;
}
.ak-coll-feat-card-price {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important; font-weight: 500 !important;
  color: #0d0d0d !important; display: block;
}
.ak-coll-feat-card-price del {
  font-size: 10px !important; font-weight: 300 !important;
  color: rgba(13,13,13,0.38) !important; margin-left: 6px;
}
.ak-coll-feat-add-btn {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(13,13,13,0.7); background: transparent;
  border: none; border-top: 0.5px solid rgba(13,13,13,0.08);
  padding: 12px 18px; cursor: pointer;
  transition: background 0.25s, color 0.25s;
  text-align: center;
}
.ak-coll-feat-add-btn:hover { background: #0d0d0d; color: #C9972A; }

/* View all */
.ak-coll-feat-footer { text-align: center; margin-top: 44px; }
.ak-coll-feat-view-all {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important; font-weight: 500 !important;
  letter-spacing: 0.24em !important; text-transform: uppercase !important;
  color: #0d0d0d !important;
  border: 0.5px solid rgba(13,13,13,0.3) !important;
  padding: 14px 40px !important;
  text-decoration: none !important; display: inline-block;
  transition: background 0.25s, color 0.25s, border-color 0.25s !important;
}
.ak-coll-feat-view-all:hover {
  background: #0d0d0d !important;
  color: #C9972A !important;
  border-color: #0d0d0d !important;
}

/* ════════════════════════════════════
   CLOSING CTA
════════════════════════════════════ */
.ak-coll-page-closing {
  padding: 88px 60px; background: #0d0d0d;
  text-align: center; position: relative; overflow: hidden;
}
.ak-coll-closing-bg {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(201,151,42,0.025) 0px, rgba(201,151,42,0.025) 1px,
    transparent 1px, transparent 18px);
}
.ak-coll-closing-content {
  position: relative; z-index: 2; max-width: 600px; margin: 0 auto;
}
.ak-coll-closing-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 400; letter-spacing: 0.32em;
  color: #C9972A; text-transform: uppercase; display: block; margin-bottom: 1.4rem;
}
.ak-coll-closing-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  font-weight: 300 !important; line-height: 1.1 !important;
  color: #fff !important; margin-bottom: 1rem !important;
}
.ak-coll-closing-title em { color: #C9972A; font-style: italic; }
.ak-coll-closing-sub {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important; font-weight: 300 !important;
  letter-spacing: 0.08em !important; color: rgba(255,255,255,0.35) !important;
  line-height: 1.9 !important; max-width: 440px; margin: 0 auto 2.4rem !important;
}
.ak-coll-closing-btn {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important; font-weight: 500 !important;
  letter-spacing: 0.24em !important; text-transform: uppercase !important;
  color: #0d0d0d !important; background: #C9972A !important;
  border: none !important; padding: 16px 40px !important;
  text-decoration: none !important; display: inline-block;
  transition: background 0.25s !important;
}
.ak-coll-closing-btn:hover { background: #E2B84A !important; }

/* ════════════════════════════════════
   KEYFRAMES
════════════════════════════════════ */
@keyframes akcp-fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes akcp-growLine {
  from { width: 0; }
  to   { width: 80px; }
}

/* ════════════════════════════════════
   TABLET — 1100px
════════════════════════════════════ */
@media (max-width: 1100px) {
  .ak-coll-page-cards    { padding: 60px 36px; }
  .ak-coll-card-text-panel { padding: 56px 48px; }
  .ak-coll-page-featured { padding: 60px 36px; }
  .ak-coll-feat-grid     { grid-template-columns: repeat(2,1fr); }
  .ak-coll-page-closing  { padding: 60px 36px; }
  .ak-coll-page-intro    { padding: 52px 36px; }
}

/* ════════════════════════════════════
   TABLET — 900px
════════════════════════════════════ */
@media (max-width: 900px) {
  .ak-coll-page-intro { grid-template-columns: 1fr; gap: 32px; }
  .ak-coll-page-intro-item + .ak-coll-page-intro-item::before { display: none; }
  .ak-coll-page-card-row { grid-template-columns: 1fr; min-height: unset; }
  .ak-coll-page-card-row.ak-coll-even { direction: ltr; }
  .ak-coll-card-image-panel { min-height: 280px; }
  .ak-coll-card-text-panel { padding: 48px 36px; }
  .ak-coll-card-text-body { max-width: 100%; }
  .ak-cpc-bl, .ak-cpc-br { display: none; }
}

/* ════════════════════════════════════
   MOBILE — 600px
════════════════════════════════════ */
@media (max-width: 600px) {
  .ak-coll-page-hero-content { padding: 60px 24px; }
  .ak-coll-page-intro    { padding: 44px 20px; gap: 28px; }
  .ak-coll-intro-num     { font-size: 38px !important; }
  .ak-coll-page-cards    { padding: 48px 16px; }
  .ak-coll-card-text-panel { padding: 40px 24px; }
  .ak-coll-card-text-cta { align-self: stretch !important; text-align: center !important; justify-content: center !important; }
  .ak-coll-page-featured { padding: 48px 16px; }
  .ak-coll-feat-grid     { grid-template-columns: 1fr; gap: 12px; }
  .ak-coll-page-closing  { padding: 52px 24px; }
  .ak-coll-card-image-panel { min-height: 240px; }
}

/* ════════════════════════════════════
   VERY SMALL — 380px
════════════════════════════════════ */
@media (max-width: 380px) {
  .ak-coll-page-title  { font-size: 36px !important; }
  .ak-coll-card-text-panel { padding: 36px 20px; }
  .ak-coll-page-cards  { padding: 40px 12px; }
}