/* ═══════════════════════════════════════════════════════════
   Urban Loomz – Home page layout (index.php only)
   Colours come from Admin → Settings → Theme Colors
   (--maroon, --gold, --light, --cream) set in includes/header.php
   ═══════════════════════════════════════════════════════════ */

/* ── Shared bits ── */
.ul-sec { padding: 56px 0; }
.ul-sec-tint { background: var(--light); }
.ul-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.ul-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15;
  color: var(--charcoal); font-weight: 700; letter-spacing: -.3px;
}
/* stitched underline – a nod to the loom */
.ul-head h2::after {
  content: ''; display: block; width: 72px; height: 0; margin-top: 10px;
  border-top: 2px dashed var(--maroon); opacity: .55;
}
.ul-head-center { justify-content: center; text-align: center; }
.ul-head-center h2::after { margin-left: auto; margin-right: auto; }
.ul-link {
  font-size: 14px; font-weight: 600; color: var(--maroon);
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px; white-space: nowrap;
}
.ul-link:hover { opacity: .75; }

.ul-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 999px; font-size: 14px; font-weight: 700;
  transition: transform .2s, background .2s, color .2s, box-shadow .2s;
}
.ul-btn-light { background: #fff; color: var(--maroon); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.ul-btn-light:hover { transform: translateY(-2px); }
.ul-btn-line { border: 1.5px solid var(--maroon); color: var(--maroon); background: transparent; }
.ul-btn-line:hover { background: var(--maroon); color: #fff; }
.ul-more { text-align: center; margin-top: 34px; }

/* ═════════ HERO ═════════ */
.ulh { position: relative; background: var(--light); overflow: hidden; }
.ulh-track { position: relative; display: grid; }
/* all slides share one grid cell → height follows the tallest image,
   no cropping of text that is baked into the banner image */
.ulh-slide {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.ulh-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; z-index: 1; }
.ulh-media { display: block; overflow: hidden; }
.ulh-media img { width: 100%; height: auto; display: block; transform: scale(1.06); transition: transform 6s ease-out; }
.ulh-slide.is-active .ulh-media img { transform: scale(1); }
.ulh-plain { min-height: 420px; background: var(--maroon); }

.ulh-caption {
  position: absolute; inset: auto 0 0 0; padding: 40px max(24px, calc(50% - 580px)) 56px;
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  color: #fff; pointer-events: none;
}
.ulh-caption > * { pointer-events: auto; }
.ulh-caption h1 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 4.4vw, 52px); line-height: 1.1; margin-bottom: 10px; max-width: 14ch; }
.ulh-caption p  { font-size: clamp(14px, 1.4vw, 17px); opacity: .92; margin-bottom: 20px; max-width: 46ch; }
.ulh-slide.is-active .ulh-caption > * { animation: ulhRise .8s cubic-bezier(.2,.7,.2,1) both; }
.ulh-slide.is-active .ulh-caption > *:nth-child(2) { animation-delay: .12s; }
.ulh-slide.is-active .ulh-caption > *:nth-child(3) { animation-delay: .24s; }
@keyframes ulhRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.ulh-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.88); color: var(--charcoal); font-size: 15px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); opacity: 0; transition: opacity .25s, transform .25s;
}
.ulh:hover .ulh-arrow { opacity: 1; }
.ulh-arrow:hover { transform: translateY(-50%) scale(1.08); }
.ulh-prev { left: 20px; } .ulh-next { right: 20px; }
.ulh-dots { position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; }
.ulh-dot { width: 34px; height: 4px; border: none; padding: 0; border-radius: 4px; background: rgba(255,255,255,.5); cursor: pointer; overflow: hidden; }
.ulh-dot span { display: block; height: 100%; width: 0; background: #fff; }
.ulh-dot.is-active span { animation: ulhProgress var(--ulh-dur, 5s) linear forwards; }
.ulh.is-paused .ulh-dot.is-active span { animation-play-state: paused; }
@keyframes ulhProgress { to { width: 100%; } }

/* default hero (no banners yet) */
.ulh-default { position: relative; background: var(--maroon); color: #fff; overflow: hidden; }
.ulh-weave {
  position: absolute; inset: 0; opacity: .14;
  background:
    repeating-linear-gradient(0deg,  #fff 0 2px, transparent 2px 14px),
    repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 14px);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
          mask-image: linear-gradient(100deg, transparent 30%, #000 85%);
}
.ulh-default-in { position: relative; padding-top: 96px; padding-bottom: 96px; }
.ulh-default h1 { font-family: 'Playfair Display', serif; font-size: clamp(34px, 6vw, 68px); line-height: 1.04; margin-bottom: 16px; animation: ulhRise .9s both; }
.ulh-default p  { font-size: 17px; opacity: .88; margin-bottom: 26px; max-width: 42ch; animation: ulhRise .9s .12s both; }
.ulh-default .ul-btn { animation: ulhRise .9s .24s both; }

/* ═════════ CATEGORY QUICK RAIL ═════════ */
.ul-rail-cats { background: #fff; border-bottom: 1px solid var(--border); }
.ul-rail-cats-in {
  display: flex; gap: 22px; padding: 20px 2px 16px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none; justify-content: center;
}
.ul-rail-cats-in::-webkit-scrollbar { display: none; }
.ul-cat-dot { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 8px; scroll-snap-align: start; }
.ul-cat-ring {
  width: 76px; height: 76px; border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--maroon), var(--gold), var(--maroon));
  transition: transform .25s;
}
.ul-cat-ring img, .ul-cat-all {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; background: var(--light); display: flex; align-items: center; justify-content: center;
  color: var(--maroon); font-size: 22px; font-weight: 700; font-family: 'Playfair Display', serif;
}
.ul-cat-dot:hover .ul-cat-ring { transform: rotate(-6deg) scale(1.05); }
.ul-cat-dot:active .ul-cat-ring { transform: scale(.92); }
.ul-cat-label { font-size: 12.5px; font-weight: 600; color: var(--charcoal); text-align: center; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ═════════ TRUST LINE ═════════ */
.ul-trust { background: #fff; border-bottom: 1px solid var(--border); }
.ul-trust-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.ul-trust-item { display: flex; align-items: center; gap: 12px; padding: 18px 16px; }
.ul-trust-item + .ul-trust-item { border-left: 1px solid var(--border); }
.ul-trust-item > i { font-size: 22px; color: var(--maroon); width: 28px; text-align: center; flex-shrink: 0; }
.ul-trust-item strong { display: block; font-size: 14px; color: var(--charcoal); }
.ul-trust-item span { font-size: 12.5px; color: #777; }
.ul-trust-item a { color: var(--maroon); text-decoration: underline; text-underline-offset: 2px; }

/* ═════════ CATEGORY MOSAIC ═════════ */
.ul-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 16px; }
.ul-tile { position: relative; overflow: hidden; border-radius: 18px; background: var(--light); isolation: isolate; }
.ul-tile-full { grid-column: span 4; grid-row: span 2; }
.ul-tile-half { grid-column: span 2; grid-row: span 2; }
.ul-tile-big  { grid-column: span 2; grid-row: span 2; }
.ul-tile-wide { grid-column: span 2; }
.ul-tile img, .ul-tile-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ul-tile-blank { background: linear-gradient(135deg, var(--maroon), #3b0905); }
.ul-tile::before { /* soft scrim for legible captions */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
}
.ul-tile::after { /* stitched inner border that appears on hover */
  content: ''; position: absolute; inset: 12px; z-index: 2; border-radius: 10px;
  border: 1.5px dashed rgba(255,255,255,.8); opacity: 0; transform: scale(1.03);
  transition: opacity .35s, transform .35s;
}
.ul-tile:hover img { transform: scale(1.06); }
.ul-tile:hover::after { opacity: 1; transform: none; }
.ul-tile-cap { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 22px; color: #fff; }
.ul-tile-cap strong { display: block; font-family: 'Playfair Display', serif; font-size: 22px; line-height: 1.15; margin-bottom: 4px; }
.ul-tile-big .ul-tile-cap strong, .ul-tile-full .ul-tile-cap strong, .ul-tile-half .ul-tile-cap strong { font-size: clamp(24px, 2.6vw, 34px); }
.ul-tile-go { font-size: 13px; font-weight: 600; opacity: .9; display: inline-flex; align-items: center; gap: 6px; }
.ul-tile-go i { font-size: 11px; transition: transform .25s; }
.ul-tile:hover .ul-tile-go i { transform: translateX(4px); }

/* ═════════ PRODUCT TABS ═════════ */
.ul-head-tabs { align-items: center; }
.ul-tabs { position: relative; display: flex; gap: 4px; background: #fff; padding: 4px; border-radius: 999px; border: 1px solid var(--border); }
.ul-tab {
  position: relative; z-index: 1; border: none; background: none; cursor: pointer;
  padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #666;
  transition: color .25s; white-space: nowrap;
}
.ul-tab.is-active { color: #fff; }
.ul-tab-ink { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--maroon); transition: left .35s cubic-bezier(.3,.8,.3,1), width .35s cubic-bezier(.3,.8,.3,1); }
.ul-tabpane { display: none; }
.ul-tabpane.is-active { display: block; animation: ulPane .45s ease both; }
@keyframes ulPane { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═════════ EXPLORE COLLECTIONS (snap carousel) ═════════ */
.ul-snap {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 22%);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 max(20px, calc(50% - 580px)) 6px; scroll-padding: 0 max(20px, calc(50% - 580px));
}
.ul-snap::-webkit-scrollbar { display: none; }
.ul-story { position: relative; aspect-ratio: 3 / 4.4; border-radius: 18px; overflow: hidden; scroll-snap-align: start; background: var(--light); }
.ul-story img, .ul-story .ul-tile-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.ul-story:hover img { transform: scale(1.05); }
.ul-story::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent 50%); }
.ul-story-cap { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; color: #fff; }
.ul-story-cap strong { display: block; font-family: 'Playfair Display', serif; font-size: 20px; line-height: 1.2; }
.ul-story-cap span { font-size: 13px; opacity: .88; }

/* ═════════ CATEGORY PRODUCT RAILS ═════════ */
.ul-sec-rail + .ul-sec-rail { padding-top: 8px; }
.ul-rail-wrap { position: relative; }
.products-grid.ul-rail {
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px;
}
.products-grid.ul-rail::-webkit-scrollbar { display: none; }
.products-grid.ul-rail > .product-card { scroll-snap-align: start; }
.ul-rail-btn {
  position: absolute; top: 38%; z-index: 4; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--charcoal); cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); transition: opacity .2s, transform .2s;
}
.ul-rail-btn:hover { transform: scale(1.08); }
.ul-rail-prev { left: -20px; } .ul-rail-next { right: -20px; }
.ul-rail-btn[hidden] { display: none; }

/* ═════════ ORDERING STEPS ═════════ */
.ul-steps-sec { background: #fff; border-top: 1px solid var(--border); }
.ul-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; counter-reset: ulstep; }
.ul-steps::before { /* the thread that connects the steps */
  content: ''; position: absolute; top: 31px; left: 12.5%; right: 12.5%; height: 0;
  border-top: 2px dashed var(--maroon); opacity: .35;
  transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.3,.7,.2,1);
}
.ul-steps.is-in::before { transform: scaleX(1); }
.ul-steps li { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 8px; }
.ul-step-ic {
  width: 62px; height: 62px; border-radius: 50%; background: #fff; border: 2px solid var(--maroon);
  color: var(--maroon); display: flex; align-items: center; justify-content: center; font-size: 22px;
  margin-bottom: 10px; position: relative; z-index: 1;
  transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .4s, background .3s, color .3s;
}
.ul-steps.is-in .ul-step-ic { transform: none; opacity: 1; }
.ul-steps.is-in li:nth-child(2) .ul-step-ic { transition-delay: .3s; }
.ul-steps.is-in li:nth-child(3) .ul-step-ic { transition-delay: .6s; }
.ul-steps.is-in li:nth-child(4) .ul-step-ic { transition-delay: .9s; }
.ul-steps li:hover .ul-step-ic { background: var(--maroon); color: #fff; }
.ul-steps strong { font-size: 15px; color: var(--charcoal); }
.ul-steps li > span:last-child { font-size: 13px; color: #777; }
.ul-steps a { color: var(--maroon); text-decoration: underline; text-underline-offset: 2px; }
.no-anim .ul-step-ic { transform: none; opacity: 1; }
.no-anim .ul-steps::before { transform: none; }

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 1024px) {
  .products-grid.ul-rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
  .ul-trust-in { grid-template-columns: repeat(2, 1fr); }
  .ul-trust-item:nth-child(3) { border-left: none; }
  .ul-trust-item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .ul-snap { grid-auto-columns: minmax(220px, 32%); }
}
@media (max-width: 768px) {
  .ul-sec { padding: 34px 0; }
  .ul-head { margin-bottom: 18px; }
  .ul-head h2 { font-size: 23px; }
  .ul-head h2::after { width: 52px; margin-top: 7px; }
  .ul-link { font-size: 13px; }

  .ulh-arrow { display: none; }
  .ulh-dots { bottom: 10px; }
  .ulh-dot { width: 22px; height: 3px; }
  .ulh-caption { padding: 24px 18px 34px; }
  .ulh-default-in { padding-top: 56px; padding-bottom: 60px; }

  .ul-rail-cats-in { justify-content: flex-start; gap: 14px; padding: 14px 4px 12px; }
  .ul-cat-dot { width: 68px; }
  .ul-cat-ring { width: 62px; height: 62px; }
  .ul-cat-label { font-size: 11.5px; }

  /* trust line becomes a swipeable chip row */
  .ul-trust-in { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0; }
  .ul-trust-in::-webkit-scrollbar { display: none; }
  .ul-trust-item { flex: 0 0 auto; min-width: 74%; scroll-snap-align: start; padding: 12px 16px; border-top: none !important; }
  .ul-trust-item:nth-child(3) { border-left: 1px solid var(--border); }

  .ul-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; gap: 10px; }
  .ul-tile { border-radius: 14px; }
  .ul-tile-full, .ul-tile-big { grid-column: span 2; grid-row: span 1; min-height: 220px; }
  .ul-tile-half { grid-column: span 1; grid-row: span 2; }
  .ul-tile-wide { grid-column: span 2; grid-row: span 1; }
  .ul-tile-one { grid-column: span 1; }
  .ul-mosaic-4 .ul-tile-one:last-child { grid-column: span 1; }
  .ul-tile-cap { left: 14px; right: 14px; bottom: 12px; }
  .ul-tile-cap strong { font-size: 16px; }
  .ul-tile-big .ul-tile-cap strong, .ul-tile-full .ul-tile-cap strong, .ul-tile-half .ul-tile-cap strong { font-size: 21px; }
  .ul-tile-go { font-size: 12px; }
  .ul-tile::after { inset: 8px; }

  .ul-head-tabs { flex-direction: column; align-items: flex-start; }
  .ul-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ul-tabs::-webkit-scrollbar { display: none; }
  .ul-tab { flex: 1; padding: 9px 12px; font-size: 13px; }

  .ul-snap { grid-auto-columns: 62%; gap: 10px; padding: 0 12px 4px; scroll-padding: 0 12px; }
  .ul-story { border-radius: 14px; }

  /* rails: app-style swipe, card peeks in from the right */
  .products-grid.ul-rail { grid-auto-columns: 44%; gap: 10px; margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%); }
  .ul-rail-btn { display: none; }

  .ul-steps { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .ul-steps::before { display: none; }
  .ul-step-ic { width: 52px; height: 52px; font-size: 18px; margin-bottom: 6px; }
  .ul-steps strong { font-size: 13.5px; }
  .ul-steps li > span:last-child { font-size: 12px; }
}
@media (max-width: 420px) {
  .products-grid.ul-rail { grid-auto-columns: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .ulh-slide, .ulh-media img, .ul-tile img, .ul-story img, .ul-step-ic, .ul-steps::before { transition: none !important; }
  .ulh-media img { transform: none !important; }
  .ul-step-ic { transform: none; opacity: 1; }
  .ul-steps::before { transform: none; }
  .ulh-caption > *, .ulh-default h1, .ulh-default p, .ulh-default .ul-btn, .ul-tabpane.is-active { animation: none !important; }
}