/* /css/app.css */

/* ========== Variables ========== */
:root {
  --cc-dark: #0a0a0a;
  --cc-light: #f7f7f7;
  --cc-text: #6b6b6b;
  --cc-border: #e5e5e5;
  --cc-font-main: 'DM Sans', sans-serif;
  --cc-right-panel-mobile: 85vw;
  --cc-right-panel-max: 420px;
  --cc-card-w: 240px;
  --cc-title-indent: 8px;
  --cc-name-price-top-gap: .08rem;

  /* reserved for JS to update */
  --cc-nav-h: 64px;
}

/* Hide “View all” when JS is active */
.js .view-all-link {
  display: none !important;
}

/* ========== Boot-only prehide ========== */
.booting .hero-title .line-inner {
  transform: translateY(100%);
}

.booting .hero-products .pcard {
  opacity: 0;
  transform: translateY(40px);
}

/* a11y: when reduced motion is preferred, don’t prehide/animate */
@media (prefers-reduced-motion: reduce) {

  .booting .hero-title .line-inner,
  .js .hero-title .line-inner {
    transform: none;
  }

  .booting .hero-products .pcard,
  .js .hero-products .pcard {
    opacity: 1;
    transform: none;
  }
}

/* ========== Base ========== */
html {
  overflow-x: hidden;
  overflow-y: auto;
}

html,
body {
  margin: 0;
}

body {
  background: #fff;
  color: var(--cc-text);
  font-family: var(--cc-font-main);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: visible;
  padding-top: 0;
  /* default: no offset */
}

/* only add an offset when the navbar is actually fixed/sticky */
body:has(.navbar.sticky-top) {
  padding-top: var(--cc-nav-h);
}

/* safety: stop first-child margins from creating a top gap */
body> :first-child {
  margin-top: 0;
}

body.modal-open,
body.offcanvas-open {
  overflow: hidden;
}

::selection {
  background: var(--cc-dark);
  color: #fff;
}

/* Images used as div thumbs */
.pthumb {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ========== Preloader ========== */
.preloader {
  position: fixed;
  inset: 0;
  background: var(--cc-dark);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-bar {
  height: 1px;
  width: 0;
  background: #fff;
  position: absolute;
  top: 50%;
}

/* Brand in preloader (newer style kept) */
.preloader-brand {
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: clamp(28px, 7vw, 56px);
  text-align: center;
  margin: 0;
  user-select: none;
  pointer-events: none;
}

/* ========== Navbar ========== */
.brand {
  font-weight: 700;
  letter-spacing: .5px;
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav.align-items-center {
    flex-direction: row !important;
    gap: .5rem;
  }
}

.navbar {
  transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease, -webkit-backdrop-filter .2s ease, border-color .2s ease;
  background: #fff;
}

.navbar.cc-nav-scrolled {
  background: rgba(255, 255, 255, .35) !important;
  --bs-bg-opacity: .35;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.navbar.cc-nav-scrolled.border-bottom {
  border-bottom-color: rgba(0, 0, 0, .08) !important;
}

.navbar.cc-nav-scrolled .navbar-brand,
.navbar.cc-nav-scrolled .nav-link {
  color: #111 !important;
}

@supports(padding-top: env(safe-area-inset-top)) {
  .navbar {
    padding-top: env(safe-area-inset-top);
  }
}

/* Make sticky-top truly fixed */
.navbar.sticky-top {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
}

/* ========== Hero ========== */
.hero {
  position: relative;
  border-bottom: 1px solid #eee;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #e9ecef;
}

.hero .hero__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 16px;
}

@media (max-width: 767.98px) {
  .hero .hero__content {
    justify-content: center;
    text-align: center;
  }
}

.hero-title {
  font-size: clamp(2.5rem, 9vw, 8rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: var(--cc-dark);
}

.hero-title>div {
  overflow: hidden;
}

.hero-title .line-inner {
  display: block;
}

.hero .hero__content .hero-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
}

.hero .hero__content .hero-copy {
  flex: 1 1 auto;
}

.hero-products {
  flex: 0 0 auto;
  width: min(100%, 420px);
  display: grid;
  gap: 14px;
  margin-left: auto;
}

.pcard {
  perspective: 1000px;
}

.pcard-inner {
  position: relative;
  height: clamp(110px, 13vh, 140px);
  border-radius: 16px;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.hero-products .pcard:nth-child(1) .pcard-inner {
  transition-delay: .00s;
}

.hero-products .pcard:nth-child(2) .pcard-inner {
  transition-delay: .08s;
}

.hero-products .pcard:nth-child(3) .pcard-inner {
  transition-delay: .16s;
}

.pcard-face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.pcard-face.back {
  transform: rotateY(180deg);
}

.hero-products.is-flipped .pcard-inner {
  transform: rotateY(180deg);
}

.pthumb {
  width: 87px;
  height: 87px;
  flex: 0 0 87px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e9ecef, #f8f9fa);
  border: 1px solid rgba(0, 0, 0, .06);
}

.ptitle {
  font-weight: 600;
  color: #111;
  line-height: 1.15;
}

.pmeta {
  font-size: .85rem;
  color: #6b6b6b;
}

.pprice {
  font-weight: 600;
  color: #111;
  margin-left: auto;
}

@media (max-width: 767.98px) {
  .hero .hero__content .hero-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-products {
    width: 100%;
  }
}

/* Compact hero tiles (scoped) */
.hero {
  --hero-thumb: 87px;
  --hero-pad-y: 10px;
  --hero-pad-x: 16px;
}

.hero .pcard-inner {
  height: calc(var(--hero-thumb) + 2 * var(--hero-pad-y));
}

.hero .pcard-face {
  padding: var(--hero-pad-y) var(--hero-pad-x);
  border: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .70);
}

.hero .pthumb {
  border: 0;
  width: var(--hero-thumb);
  height: var(--hero-thumb);
}

.hero .ptitle {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.hero .pcard-face {
  justify-content: flex-start;
}

.hero .pcard-face> :nth-child(2) {
  flex: 1 1 0;
  min-width: 0;
}

.hero .pprice {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ========== Marquee ========== */
.marquee {
  padding: 1rem 0;
  background: var(--cc-dark);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}

.marquee-content {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.marquee-item {
  display: inline-block;
  margin: 0 2rem;
  font-weight: 500;
  opacity: .8;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* ========== Sections / headers ========== */
section:not(.hero) {
  padding: 5rem 0;
}

.section-header h4 {
  font-weight: 700;
}

.view-all-link {
  font-weight: 500;
  color: var(--cc-dark);
  text-decoration: none;
  position: relative;
}

.view-all-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--cc-dark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s ease-out;
}

.view-all-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Product cards */
.product-card {
  border: 0;
  background: transparent;
  transform: translateZ(0);
}

.product-card .card-img-container {
  overflow: hidden;
}

.product-card:hover .card-img-top {
  transform: scale(1.05);
}

.product-card .card-img-top {
  display: block;
  object-fit: cover;
}

.product-card .card-body {
  padding: 1rem 0;
}

.product-card .meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 0;
}

.product-card .card-title.cc-title-2line {
  font-weight: 500;
  color: var(--cc-dark);
  font-size: 1rem;
  line-height: 1.15;
  margin: 0;
  min-width: 0;
  padding-inline-start: var(--cc-title-indent);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.product-card .price-col {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.product-card .price-now {
  font-weight: 600;
  display: block;
  line-height: 1.05;
}

.product-card .price-old {
  font-size: .85rem;
  line-height: 1.05;
}

.product-card .card-img-container+.card-body {
  padding-top: var(--cc-name-price-top-gap);
  margin-top: -2px;
}

/* Center header + “View all” under it */
.section-header {
  justify-content: center !important;
  text-align: center;
  flex-wrap: wrap;
  gap: .25rem;
}

.section-header h4 {
  flex-basis: 100%;
  text-align: center;
}

.section-header .view-all-link {
  display: inline-block;
  margin: .25rem auto 0;
}

/* Centered band: exactly 3 cards on lg+ */
.cc-band {
  max-width: calc(3 * (var(--cc-card-w) + var(--bs-gutter-x)));
  margin-inline: auto;
}

.cc-card {
  width: var(--cc-card-w);
}

.cc-band>.col {
  order: 0;
}

@media (max-width: 991.98px) {
  .cc-band {
    max-width: 100%;
  }

  .cc-card {
    width: 100%;
    max-width: var(--cc-card-w);
  }
}

/* ========== Offcanvas (cart/wishlist) ========== */
#offcanvasCart,
#offcanvasWishlist,
.offcanvas {
  height: 100dvh;
  max-height: 100dvh;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff;
  overscroll-behavior: contain;
  backface-visibility: hidden;
  contain: layout paint;
  outline: 1px solid transparent;
}

#offcanvasCart .offcanvas-body,
#offcanvasWishlist .offcanvas-body {
  padding-top: calc(.5rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
}

.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  height: 100dvh;
}

.offcanvas-start,
.offcanvas-end {
  top: 0;
  bottom: 0;
}

#offcanvasCart.offcanvas-end,
#offcanvasWishlist.offcanvas-end {
  width: min(var(--cc-right-panel-mobile), var(--cc-right-panel-max));
  max-width: var(--cc-right-panel-max);
  box-shadow: -12px 0 24px rgba(0, 0, 0, .12);
  border-left: 1px solid #eee;
}

@media (min-width: 992px) {

  #offcanvasCart.offcanvas-end,
  #offcanvasWishlist.offcanvas-end {
    width: var(--cc-right-panel-max);
  }
}

/* ========== Footer ========== */
.footer {
  background: var(--cc-light);
  border-top: 1px solid var(--cc-border);
  padding: 4rem 0;
}

.footer a {
  color: var(--cc-text);
  text-decoration: none;
  transition: color .2s;
}

.footer a:hover {
  color: var(--cc-dark);
}

.footer .brand {
  font-weight: 700;
}

/* ========== Utilities ========== */
.g-reveal {
  opacity: 0;
}

.section-header,
.cc-band {
  contain: layout paint;
}

/* Tighter spacing sections */
#new-arrivals,
#best-sellers,
#party-wear,
#regular-wear,
#reviews {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

#new-arrivals .section-header,
#best-sellers .section-header,
#party-wear .section-header,
#regular-wear .section-header,
#reviews .section-header {
  margin-bottom: .75rem !important;
}

/* ========== Reviews carousel ========== */
.review-stage {
  position: relative;
  height: clamp(220px, 36vh, 300px);
  max-width: 900px;
  margin-inline: auto;
}

.review-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(88vw, 420px);
  height: clamp(140px, 26vh, 190px);
  transform: translate(-50%, -50%);
  border-radius: 16px;
  background: var(--cc-dark);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  color: #fff;
  border-color: rgba(255, 255, 255, .08);
  padding: 1.25rem;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.rv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
  color: #111;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
  z-index: 50;
}

.rv-prev {
  left: -4px;
}

.rv-next {
  right: -4px;
}

@media (min-width: 992px) {
  .rv-prev {
    left: -22px;
  }

  .rv-next {
    right: -22px;
  }
}

@media (hover:hover) {
  .rv-nav:hover {
    background: #111;
    color: #fff;
  }
}

.review-card[data-depth="2"] {
  filter: blur(.2px);
}

/* slanted light look */
#reviews .review-card {
  font-family: "Aptos", "DM Sans", var(--cc-font-main), system-ui, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: .80rem;
  line-height: 1.35;
  letter-spacing: .1px;
}

/* mobile containment */
#reviews .review-stage {
  overflow: hidden;
  max-width: 100%;
  padding-inline: 8px;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  contain: layout paint;
}

@media (max-width: 991.98px) {
  #reviews .rv-prev {
    left: 8px;
  }

  #reviews .rv-next {
    right: 8px;
  }
}

/* Keep product images boxed (wrapper-only sizing) */
.card-img-container {
  aspect-ratio: 1/1;
  overflow: hidden;
}

/* safe global default for images everywhere */
.card-img-top {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* only force full stretch when inside the wrapper */
.card-img-container>.card-img-top,
.card-img-container picture>.card-img-top {
  width: 100%;
  height: 100%;
}

/* prevent Safari’s blue ? when <img> exists without a real src yet */
.card-img-top:not([src]),
.card-img-top[src=""] {
  visibility: hidden;
}

/* --- Collapse the navbar placeholder after nav mounts --- */
[data-include^="./partials/navbar"] {
  display: block;
  min-height: var(--cc-nav-h);
  /* reserve space BEFORE nav loads */
}

body:has(.navbar.sticky-top) [data-include^="./partials/navbar"] {
  min-height: 0 !important;
  /* remove extra gap AFTER */
}

/* Cart row removing safety */
.cc-cart-row[data-removing="1"] {
  pointer-events: none;
}

/* --- Fix: Title + Rating must never overlap --- */
.title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.title-row #p-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.12;
}

.title-row #p-rating,
.title-row #p-rating * {
  position: static !important;
  float: none !important;
}

.title-row #p-rating {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2px;
}

.title-row #p-rating .cc-stars-svg {
  width: 90px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

@media (max-width:576px) {
  .title-row #p-rating {
    order: 2;
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
    white-space: normal;
  }
}

/* Global baseline for rating stars everywhere */
.cc-stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.cc-stars .avg {
  font-weight: 600;
}

.cc-stars-svg {
  width: 88px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
}

@media (max-width:576px) {
  .cc-stars-svg {
    width: 80px;
    height: 16px;
  }
}

/* Match size-pill dimensions to the reference */
#p-sizes .btn,
#p-sizes .btn.btn-sm {
  min-width: 48px;
  height: auto;
  padding: .375rem .75rem;
  /* Bootstrap default ~36px tall */
  line-height: 1.5;
  font-size: 1rem;
  border-radius: 10px;
}

@media (max-width: 575.98px) {

  #p-sizes .btn,
  #p-sizes .btn.btn-sm {
    min-width: 44px;
  }
}

/* ========== DoorFX ========== */
#doorfx.doorfx {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}

.doorfx__panel {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #000;
}

.doorfx__panel--left {
  left: 0;
  transform: translateX(0);
}

.doorfx__panel--right {
  right: 0;
  transform: translateX(0);
}

.doorfx--opening .doorfx__panel--left {
  animation: doorOpenLeft .60s ease-out forwards;
}

.doorfx--opening .doorfx__panel--right {
  animation: doorOpenRight .60s ease-out forwards;
}

.doorfx--closing .doorfx__panel--left {
  animation: doorCloseLeft .50s ease-in forwards;
}

.doorfx--closing .doorfx__panel--right {
  animation: doorCloseRight .50s ease-in forwards;
}

@keyframes doorOpenLeft {
  to {
    transform: translateX(-100%);
  }
}

@keyframes doorOpenRight {
  to {
    transform: translateX(100%);
  }
}

@keyframes doorCloseLeft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes doorCloseRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.doorfx--hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .doorfx__panel {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========== Reels (half-screen, horizontal) ========== */
.reels-wrap {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  height: 50vh;
  /* occupy half the screen */
  align-items: center;
}

.reel-tile {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 9/16;
  width: auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  scroll-snap-align: start;
  cursor: pointer;
}

.reel-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 150% at 80% 10%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .28));
  pointer-events: none;
}

.reel-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  /* let the button get the click */
}

.reel-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 500;
  font-size: .9rem;
  z-index: 2;
}

.reel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.1rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  pointer-events: none;
  z-index: 2;
}

.reel-tile:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* ========== Reel modal ========== */

/* Reel FS: centered grid + fixed 9:16 stack */
#reelModal .modal-content {
  display: grid;
  place-items: center;
  overflow: hidden !important;
  contain: layout paint size;
}

/* 9:16 box sized from the actual visual viewport height */
.reel-stack {
  position: relative;
  width: min(100vw, calc(var(--reel-vvh, 100dvh) * 9 / 16));
  height: min(var(--reel-vvh, 100dvh), calc(100vw * 16 / 9));
}

/* Player fills the stack, no layout shifts */
#reelModal #reel-player {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  background: #000;
  z-index: 1;
}

/* Lock the modal & backdrop to the same height to prevent scroll leaks */
#reelModal,
#reelModal .modal-dialog,
#reelModal .modal-content,
.modal-backdrop {
  height: var(--reel-vvh, 100dvh);
  max-height: var(--reel-vvh, 100dvh);
}



/* Positioning inside modal */
#reelModal .modal-content {
  position: relative;
  padding: 0 !important;
}

#reelModal #reel-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 1;
}

/* The CTA sits above the scrub bar and respects safe-area */
#reelModal #reel-view-product {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  z-index: 50;
  pointer-events: auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  border-radius: 999px;
}

@media (max-width: 576px) {
  #reelModal #reel-view-product {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    padding: .6rem 1rem;
    font-size: 0.95rem;
  }
}

@supports (-webkit-touch-callout: none) {
  #reelModal #reel-view-product {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}

/* Backdrop should fully cover; also prevent gestures from passing through */
.modal-backdrop {
  touch-action: none;
}

/* Keep overlays above the video */
#reelModal #reelModalTitle,
#reelModal .btn-close {
  position: absolute;
  z-index: 90;
  pointer-events: auto;
}

/* Hide FS / Download / PiP buttons in WebKit/Chromium controls */
#reelModal video::-webkit-media-controls-fullscreen-button,
#reelModal video::-webkit-media-controls-download-button,
#reelModal video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

#reelModal video::-webkit-media-controls-enclosure {
  overflow: hidden !important;
}

/* iOS reveal safety */
html.ios .g-reveal {
  opacity: 1 !important;
}

/* ========== Reels (fresh look) ========== */
.reels-shell {
  position: relative;
  isolation: isolate;
  border-radius: 20px;
  padding: 12px 0;
  background:
    radial-gradient(140% 120% at 10% 0%, #ffffff 0%, #f7f7f7 45%, #f0f0f0 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .08) inset, 0 10px 28px rgba(0, 0, 0, .06);
  overflow: hidden;
}

/* soft fade edges */
.reels-shell::before,
.reels-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 54px;
  pointer-events: none;
  z-index: 5;
}

.reels-shell::before {
  left: 0;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}

.reels-shell::after {
  right: 0;
  background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
}

/* nav buttons */
.reels-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(0, 0, 0, .08);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  color: #111;
}

.reels-prev {
  left: 10px;
}

.reels-next {
  right: 10px;
}

@media (hover:hover) {
  .reels-nav:hover {
    background: #111;
    color: #fff;
  }
}

@media (max-width: 576px) {
  .reels-nav {
    display: none;
  }
}

/* scroll strip */
.reels-wrap {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 12px 16px;
  height: 56vh;
  /* a touch taller, feels cinematic */
  align-items: center;
  scrollbar-gutter: stable;
  scroll-padding-left: 12px;
}

@media (max-width: 991.98px) {
  .reels-wrap {
    height: 52vh;
  }
}

@media (max-width: 576px) {
  .reels-wrap {
    height: 50vh;
  }
}

/* tiles */
.reel-tile {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 9/16;
  border-radius: 18px;
  overflow: hidden;
  background: #e9ecef;
  scroll-snap-align: center;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}

@media (hover:hover) {
  .reel-tile:hover {
    transform: translateY(-2px) scale(1.02) rotate3d(0.2, -0.1, 0, 0.8deg);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .16);
  }
}

.reel-tile:focus {
  outline: 3px solid #111;
  outline-offset: 2px;
}

/* animated glow border ring (conic gradient) */
.reel-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
}

.reel-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background:
    conic-gradient(from var(--angle, 0deg),
      rgba(255, 0, 120, .8),
      rgba(120, 60, 255, .85),
      rgba(0, 140, 255, .85),
      rgba(255, 0, 120, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: exclude;
  mask-composite: exclude;
  animation: spin 6s linear infinite;
  opacity: .0;
  transition: opacity .25s;
}

.reel-tile:is(:hover, :focus-visible) .reel-border::before {
  opacity: .9;
}

@keyframes spin {
  to {
    --angle: 360deg;
  }
}

/* video inside tile */
.reel-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  /* button receives click */
  filter: saturate(1.05) contrast(1.02);
}

/* overlays */
.reel-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(17, 17, 17, .7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  z-index: 3;
  backdrop-filter: blur(6px);
}

.reel-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.25rem;
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 4px 22px rgba(0, 0, 0, .55);
  pointer-events: none;
  z-index: 3;
}

/* subtle scroll hint that disappears after first scroll */
.reels-hint {
  position: absolute;
  right: 24px;
  bottom: 10px;
  z-index: 6;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .9rem;
  color: #111;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  transition: opacity .3s ease, transform .3s ease;
}

.reels-hint.hide {
  opacity: 0;
  transform: translateY(6px);
}

/* Reel FS: centered grid + fixed 9:16 stack */
#reelModal .modal-content {
  display: grid;
  place-items: center;
  overflow: hidden !important;
  contain: layout paint size;
}

/* Player and ghosts fill the stack; layout never changes */
#reelModal #reel-player {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  background: #000;
  z-index: 1;
}


/* Belt & suspenders: block scroll chaining inside the modal */
#reelModal {
  overscroll-behavior: contain;
  touch-action: none;
}

#reel-quick-card .form-select,
#reel-quick-card select,
#reel-quick-card button {
  font-size: 16px;
  /* >=16px stops Safari from zooming */
}

#reelModal #reel-player {
  object-fit: cover;
  background: #000;
}

/* --- Reel quick-add: glassy card over video --- */
#reel-quick-card .card {
  /* fallback when backdrop-filter isn't supported */
  background: rgba(16, 16, 16, .28);
  color: #fff;

  /* glass */
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);

  /* subtle border + shadow to separate from video */
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

/* make the muted price readable on glass */
#reel-quick-card .text-muted {
  color: rgba(255, 255, 255, .82) !important;
}

/* keep controls legible and avoid iOS zoom quirks already handled */
#reel-quick-card .form-select,
#reel-quick-card button {
  background-clip: padding-box;
}

/* states of the Add button remain the same logic-wise; just ensure contrast */
#reel-quick-card #rq-add.btn-dark {
  background: rgba(0, 0, 0, .86);
  border-color: rgba(255, 255, 255, .22);
}

#reel-quick-card #rq-add.btn-outline-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, .30);
}

/* --- Reel quick-add must float above video and absorb interactions --- */
#reel-quick-card {
  z-index: 60 !important;
  /* above the player (z=1) and safe under title/close (z≈40) */
  pointer-events: auto;
}

/* When the card is active we temporarily disable pointer hits on the player */
#reelModal #reel-player.cc-blocked-by-card {
  pointer-events: none !important;
}

/* Safety: backdrop & modal should never allow scroll chaining to the page */
.modal-backdrop,
#reelModal {
  touch-action: none;
  overscroll-behavior: contain;
}


/* Lock the modal & backdrop to the same height to prevent scroll leaks */
#reelModal,
#reelModal .modal-dialog,
#reelModal .modal-content,
.modal-backdrop {
  height: var(--reel-vvh, 100dvh);
  max-height: var(--reel-vvh, 100dvh);
}

/* ----- Diaries page: grid of reels (2 per row mobile, 5 per row on laptop) ----- */
.reels-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

/* 5-up starting at Bootstrap lg (>=992px) */
@media (min-width: 992px) {
  .reels-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Make the tile width-driven (no fixed height), keep 9:16 */
.reels-grid .reel-tile {
  position: relative;
  width: 100%;
  height: auto;
  /* overrides the strip's 100% height */
  aspect-ratio: 9/16;
  border-radius: 18px;
  overflow: hidden;
  background: #e9ecef;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}

.reels-grid .reel-tile:focus {
  outline: 3px solid #111;
  outline-offset: 2px;
}

/* video and overlays reuse your existing classes */
.reels-grid .reel-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Force the reel modal & backdrop to exactly cover the visual viewport */
#reelModal,
#reelModal .modal-dialog,
#reelModal .modal-content,
.modal-backdrop {
  height: var(--reel-vvh, 100dvh) !important;
  min-height: var(--reel-vvh, 100dvh) !important;
}

/* Ensure backdrop is fixed & fully opaque so page never shows through */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #000;
}

.modal-backdrop.show {
  opacity: .8;
}

/* keep your desired dim level */

/* Keep the 9:16 sizing for other pages, but NOT when we want full-bleed */
#reelModal.reel-fullbleed .modal-content {
  display: block;
  /* stop centering grid that shrinks the stage */
  overflow: hidden !important;
}

/* Full-bleed stage that fills the entire visual viewport */
#reelModal.reel-fullbleed .reel-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Player already absolute, just confirm full cover */
#reelModal.reel-fullbleed #reel-player {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Make the modal & backdrop exactly the visual viewport height */
#reelModal.reel-fullbleed,
#reelModal.reel-fullbleed .modal-dialog,
#reelModal.reel-fullbleed .modal-content,
#reelModal.reel-fullbleed~.modal-backdrop,
.modal-backdrop.show {
  height: var(--reel-vvh, 100dvh) !important;
  min-height: var(--reel-vvh, 100dvh) !important;
}

/* ===== touch behavior for finger-follow drag ===== */
#reelModal .reel-stack {
  touch-action: pan-y;
}

/* Force-hide any reel title badges and the modal title if they exist */
.reel-badge {
  display: none !important;
}

#reelModalTitle {
  display: none !important;
}

/* --- Footer refresh (mobile tidy + desktop separators) --- */
.footer .footer-title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: 0.85rem;
}

.footer .footer-brand {
  letter-spacing: .02em;
}

.footer .footer-link {
  color: var(--cc-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .2s ease, text-underline-offset .2s ease;
}

.footer .footer-link:hover {
  color: var(--cc-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* subtle vertical separators on desktop for structure */
@media (min-width: 992px) {
  .footer .footer-grid .col+.col {
    border-left: 1px solid var(--cc-border);
    padding-left: 1.25rem;
  }
}

/* compact, modern social pill */
.footer .social-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  color: #111;
}

.footer .social-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.footer .social-pill img {
  width: 18px;
  height: 18px;
  display: block;
}

/* spacing + alignment polish on small screens */
@media (max-width: 575.98px) {
  .footer .footer-grid .col {
    text-align: left;
    /* still clean, avoids center clutter */
  }
}

/* --- Footer: mobile polish (≤576px) --- */
@media (max-width: 575.98px) {
  .footer {
    padding-top: 2.75rem;
    padding-bottom: 2.25rem;
  }

  /* compact the grid and make each column a neat tile */
  .footer .footer-grid {
    row-gap: 12px;
  }

  .footer .footer-grid .col {
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: 14px;
    padding: 14px 14px 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
    text-align: left;
  }

  /* tighter, consistent typography */
  .footer .footer-title {
    font-size: .80rem;
    letter-spacing: .09em;
    margin-bottom: .5rem;
  }

  .footer .footer-link {
    font-size: .95rem;
    line-height: 1.35;
  }

  .footer .footer-brand {
    font-size: 1rem;
    margin-bottom: .25rem;
  }

  /* tame the brand mark size so it doesn’t crowd */
  .footer .footer-grid img[alt="Code Cotton logo"] {
    width: 56px;
    height: 56px;
  }

  /* slim social pill + bottom bar spacing */
  .footer .social-pill {
    padding: 6px 10px;
  }

  .footer .footer-bottom {
    padding-top: 1.25rem !important;
    margin-top: 1.25rem !important;
  }
}

/* ===== Footer: ultra-compact mobile + tidy desktop ===== */

/* Base */
.footer {
  background: var(--cc-light);
  border-top: 1px solid var(--cc-border);
}

/* Desktop visual separators remain */
@media (min-width: 992px) {
  .footer .footer-grid .col+.col {
    border-left: 1px solid var(--cc-border);
    padding-left: 1.25rem;
  }
}

/* Neutralize any earlier mobile "card tiles" */
@media (max-width: 575.98px) {
  .footer {
    padding-top: 2rem;
    padding-bottom: 1.75rem;
  }

  .footer .footer-grid {
    row-gap: .5rem;
  }

  .footer .footer-grid .col {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* Accordion toggle (mobile only) */
.footer-accordion {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .5rem;
  padding: .55rem 0;
  background: transparent;
  border: 0;
  color: #111;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
}

.footer-accordion:focus {
  outline: none;
}

.footer-accordion i {
  transition: transform .25s ease;
}

/* Rotate chevron when open (Bootstrap updates aria-expanded) */
.footer-accordion[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Lists under accordion: subtle spacing */
#f-shop,
#f-support,
#f-questions {
  border-top: 1px solid var(--cc-border);
  padding-top: .5rem;
  margin-top: .25rem;
}

/* Link rhythm */
.footer .footer-link {
  color: var(--cc-text);
  text-decoration: none;
}

.footer .footer-link:hover {
  color: var(--cc-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Social pill */
.footer .social-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  color: #111;
}

.footer .social-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.footer .social-pill img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Tighter bottom bar on mobile */
@media (max-width: 575.98px) {
  .footer .footer-bottom {
    padding-top: .75rem !important;
    margin-top: 1rem !important;
  }
}

/* Cart: product title should always look black (not blue) */
#offcanvasCart .js-cart-row-title,
#offcanvasCart .js-cart-row-title:visited,
#offcanvasCart .js-cart-row-title:hover,
#offcanvasCart .js-cart-row-title:active,
#cart-list .js-cart-row-title,
#cart-list .js-cart-row-title:visited,
#cart-list .js-cart-row-title:hover,
#cart-list .js-cart-row-title:active {
  color: #000 !important;
  text-decoration: none !important;
}

/* Cart: plain dark button variant for "Move to wishlist" */
.btn-plain-dark {
  --bs-btn-color: #000;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;     /* subtle gray on hover */
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f1f3f5;
  --bs-btn-active-border-color: #000;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  border-width: 1px;
}

/* Keep the move button single-line and allow shrinking */
#cart-list [data-action="move-wishlist"] {
  white-space: nowrap;
  min-width: 0;                  /* let it shrink inside the flex row */
  padding-left: .5rem;
  padding-right: .5rem;
}
#cart-list [data-action="move-wishlist"] .cc-fittext {
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  max-width: 100%;
}
/* Cart: top-right red X remove button */
.cc-cart-row .cc-remove {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  z-index: 3;              /* above stretched-link etc. */
}
.cc-cart-row .cc-remove svg { display: block; }
.cc-cart-row .cc-remove:focus-visible { outline: 2px solid rgba(220,53,69,.5); outline-offset: 2px; }
.modal-fullscreen .reel-stack {
  height: var(--reel-vvh, 100svh);
  min-height: var(--reel-vvh, 100svh);
}