/* ═══════════════════════════════════════════════════════════
   LYRION ATELIER - PRODUCT DETAIL PAGE LAYOUT
   Gucci-pattern: below the gallery, everything is a vertical
   stack of full-width rows separated by hairline rules.
   No grid. No columns. No side-by-side at any breakpoint.
   Scoped to [data-page="product"] only.
═══════════════════════════════════════════════════════════ */

/* ----------------------------------------------------------------
   Palette for this page: ivory ground, ink text, gold as a fine
   accent only. No orange or tan.

   css/restoration.css applies `background: var(--apricot) !important;
   border-radius: var(--radius) !important` to the bare `button`
   selector, which painted every control on this page apricot #F0A868
   with a 12px radius, including the accordion rows and the read more
   link. That sheet is shared with pages outside this brief, so rather
   than editing it the orange is neutralised here, scoped to the
   product page.
----------------------------------------------------------------- */
[data-page="product"] {
  --pdp-ink: #2B2440;
  --pdp-ivory: #FDF8F0;
  --pdp-gold: #C9922B;
  --pdp-hairline: rgba(43, 36, 64, 0.14);
}

/* Nothing on this page carries a fill, a radius or a shadow unless a
   rule below deliberately gives it one. */
[data-page="product"] .pdp-wrapper button,
[data-page="product"] .pdp-wrapper .btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--pdp-ink) !important;
}

[data-page="product"] .pdp-wrapper button:hover,
[data-page="product"] .pdp-wrapper .btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* styles/soho-theme.css already clears these two header controls, but it is
   injected by script, so the apricot from restoration.css paints them for the
   first frames of every load. pdp-layout.css is a plain <link>, so restating
   the settled values here removes that orange flash on this page. The values
   match soho-theme.css exactly; when it lands nothing moves. */
[data-page="product"] .site-header .nav-item-trigger,
[data-page="product"] .site-header .nav-drawer-close {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The cookie consent banner is injected by js/analytics.js and sits outside
   .pdp-wrapper, so the reset above does not reach it. Its own stylesheet
   already asks for gold (#C9A84C) on both controls; the apricot from
   restoration.css was winning only because that sheet marks the bare
   `button` rule !important. Restated here with the same weight and scoped
   to this page, so the banner reads in brand gold rather than orange.
   Other pages keep whatever they had. */
[data-page="product"] #la-consent-accept {
  background: #C9A84C !important;
  background-color: #C9A84C !important;
  color: #0A1628 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

[data-page="product"] #la-consent-accept:hover {
  background: #E2B959 !important;
  background-color: #E2B959 !important;
  transform: none !important;
  box-shadow: none !important;
}

[data-page="product"] #la-consent-reject {
  background: transparent !important;
  background-color: transparent !important;
  color: #C9A84C !important;
  border: 1.5px solid #C9A84C !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

[data-page="product"] #la-consent-reject:hover {
  background: rgba(201, 168, 76, 0.1) !important;
  background-color: rgba(201, 168, 76, 0.1) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* The banner sets its own cream body text; a blanket `p, li, span` rule in
   an older sheet was repainting it near-black on the navy ground. Put the
   intended colour back, on this page only. */
[data-page="product"] #la-consent-banner p,
[data-page="product"] #la-consent-banner p span {
  color: #F0E6C8 !important;
}

/* ----------------------------------------------------------------
   Page wrapper
----------------------------------------------------------------- */
[data-page="product"] .pdp-wrapper {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--soho-gutter, clamp(1.25rem, 4vw, 2.5rem));
  box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Gallery - contained column, never full bleed

   The image sits in its own column capped at 640px and is centred
   inside the wrapper. object-fit is `contain`, not `cover`: the
   source photography is square, so cropping it to a 4:5 box cut the
   bottom off the garment. Contain shows the whole product in frame.
----------------------------------------------------------------- */
[data-page="product"] .pdp-gallery {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

[data-page="product"] .pdp-gallery__main {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  background: transparent;
}

[data-page="product"] .pdp-gallery__thumbs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

[data-page="product"] .pdp-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

[data-page="product"] .pdp-gallery__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  object-position: center center;
  border-radius: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, border-color 160ms ease;
}

/* Gold only as a fine accent, on the selected thumb. */
[data-page="product"] .pdp-gallery__thumb.active,
[data-page="product"] .pdp-gallery__thumb:hover {
  opacity: 1;
  border-color: var(--pdp-gold);
}

/* ----------------------------------------------------------------
   Product header - name + price in the action column
----------------------------------------------------------------- */
[data-page="product"] .pdp-name {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--plum, #5B4B7A);
  margin: 0 0 0.25rem;
}

[data-page="product"] .pdp-price {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink, #2B2440);
  margin: 0 0 1.5rem;
}

/* ----------------------------------------------------------------
   Size selector
----------------------------------------------------------------- */
[data-page="product"] .pdp-selector {
  margin-bottom: 1.5rem;
}

[data-page="product"] .pdp-selector label {
  display: block;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum, #5B4B7A);
  margin-bottom: 0.4rem;
}

[data-page="product"] .pdp-selector select {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--border, rgba(91,75,122,0.18));
  border-radius: 2px;
  background: var(--cream, #FDF8F0);
  color: var(--ink, #2B2440);
  font-size: 1rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  appearance: auto;
}

[data-page="product"] .pdp-selector .sizing-note {
  font-size: var(--text-sm, 0.875rem);
  color: var(--muted, #6D627E);
  margin: 0.35rem 0 0;
}

/* ================================================================
   ROW STACK - The buy section + service rows
   Every row: full width, hairline top border, generous padding.
================================================================ */

[data-page="product"] .pdp-stack {
  width: 100%;
  border-top: 1px solid var(--border, rgba(91,75,122,0.18));
}

[data-page="product"] .pdp-row {
  width: 100%;
  border-bottom: 1px solid var(--border, rgba(91,75,122,0.18));
}

/* ----------------------------------------------------------------
   Row a - ADD TO BAG
----------------------------------------------------------------- */
[data-page="product"] .pdp-row--atb {
  padding: 1.25rem 0;
}

/* The one deliberate fill on this page: the primary CTA, in brand ink.
   Selector carries .pdp-wrapper so it out-specifies the page-wide
   button reset above, which would otherwise strip this fill too. */
[data-page="product"] .pdp-wrapper button.pdp-atb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 56px;
  padding: 0 1.5rem;
  background: var(--pdp-ink) !important;
  color: var(--pdp-ivory) !important;
  border: none;
  border-radius: 2px !important;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease;
}

/* restoration.css paints every `span` with `color: var(--ink) !important`,
   which left this label near-black on the ink fill. The label belongs to the
   button, so it takes the button's own foreground. */
[data-page="product"] .pdp-wrapper button.pdp-atb-btn .pdp-atb-label {
  color: var(--pdp-ivory) !important;
}

/* Needs !important to override the base CTA background (also !important);
   otherwise the ink fill remains on hover. */
[data-page="product"] .pdp-wrapper button.pdp-atb-btn:hover {
  background: var(--plum, #5B4B7A) !important;
  background-color: var(--plum, #5B4B7A) !important;
}

[data-page="product"] .pdp-atb-btn:focus-visible {
  outline: 2px solid var(--plum, #5B4B7A);
  outline-offset: 2px;
}

[data-page="product"] .pdp-atb-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Row b - Delivery estimate
----------------------------------------------------------------- */
[data-page="product"] .pdp-row--delivery {
  padding: 0.9rem 0;
}

[data-page="product"] .pdp-row-inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

[data-page="product"] .pdp-row-inline svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted, #6D627E);
}

[data-page="product"] .pdp-row-inline span {
  font-size: var(--text-sm, 0.875rem);
  color: var(--muted, #6D627E);
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   Row c - Service rows (Contact, Returns, etc.)
----------------------------------------------------------------- */
[data-page="product"] .pdp-row--service {
  padding: 1rem 0;
}

[data-page="product"] .pdp-service {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

[data-page="product"] .pdp-service svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--plum, #5B4B7A);
}

[data-page="product"] .pdp-service__body {
  flex: 1 1 0%;
}

[data-page="product"] .pdp-service__label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--ink, #2B2440);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: block;
  line-height: 1.4;
}

[data-page="product"] .pdp-service__sub {
  font-size: var(--text-sm, 0.875rem);
  color: var(--muted, #6D627E);
  margin: 0.15rem 0 0;
  line-height: 1.4;
}

/* Service row with expand toggle */
[data-page="product"] .pdp-service--expand .pdp-service__label {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  width: 100%;
}

[data-page="product"] .pdp-service--expand .pdp-service__label::after {
  content: '+';
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--muted, #6D627E);
  transition: transform 200ms ease;
}

[data-page="product"] .pdp-service--expand.is-open .pdp-service__label::after {
  transform: rotate(45deg);
}

[data-page="product"] .pdp-service__expand-content {
  display: none;
  font-size: var(--text-sm, 0.875rem);
  color: var(--muted, #6D627E);
  margin-top: 0.5rem;
  line-height: 1.6;
}

[data-page="product"] .pdp-service--expand.is-open .pdp-service__expand-content {
  display: block;
}

/* ----------------------------------------------------------------
   Row d - Product description
----------------------------------------------------------------- */
[data-page="product"] .pdp-row--desc {
  padding: 1.5rem 0;
}

[data-page="product"] .pdp-desc__heading {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--plum, #5B4B7A);
  margin: 0 0 0.3rem;
}

[data-page="product"] .pdp-desc__sku {
  font-size: var(--text-sm, 0.875rem);
  color: var(--muted, #6D627E);
  margin: 0 0 0.85rem;
}

[data-page="product"] .pdp-desc__text {
  font-size: var(--text-base, 1.0625rem);
  line-height: var(--leading-relaxed, 1.75);
  color: var(--ink, #2B2440);
  max-width: none;
  margin: 0;
}

[data-page="product"] .pdp-desc__text.is-truncated {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* A plain text link, not a control. No fill, no border, no radius, no
   padding box: just underlined ink. */
[data-page="product"] .pdp-desc__read-more {
  /* inline-block, not inline: margin-top is ignored on an inline box, and
     the link needs to clear the paragraph above it. It carries no padding,
     border or fill, so it still reads as running text. */
  display: inline-block;
  margin-top: 0.6rem;
  font-size: var(--text-sm, 0.875rem);
  color: var(--pdp-ink) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  cursor: pointer;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-family: inherit;
}

[data-page="product"] .pdp-desc__read-more:hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ----------------------------------------------------------------
   Row e - Accordion rows
----------------------------------------------------------------- */
[data-page="product"] .pdp-row--accordion {
  padding: 0;
}

/* A single pale hairline along the TOP of each row, nothing else. The
   rows carry no fill, no radius and no shadow, so they read as thin
   rules until you actually read the label. */
[data-page="product"] .pdp-accordion-item {
  border: none;
  border-top: 1px solid var(--pdp-hairline) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-page="product"] .pdp-accordion-item:last-child {
  border-bottom: none;
}

[data-page="product"] .pdp-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  /* generous vertical padding so the rows breathe */
  padding: 1.4rem 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pdp-ink) !important;
}

/* The global button rule adds a lift and a shadow on hover. Neither
   belongs on a row that is meant to look like a rule. */
[data-page="product"] .pdp-accordion__trigger:hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

[data-page="product"] .pdp-accordion__trigger:focus-visible {
  outline: 2px solid var(--plum, #5B4B7A);
  outline-offset: -2px;
}

/* Chevron: same ink as the label, right aligned, thin stroke. */
[data-page="product"] .pdp-accordion__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--pdp-ink) !important;
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
  transition: transform 200ms ease;
}

[data-page="product"] .pdp-accordion-item.is-open .pdp-accordion__chevron {
  transform: rotate(180deg);
}

[data-page="product"] .pdp-accordion__panel {
  display: none;
  padding: 0 0 1.25rem;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-relaxed, 1.75);
  color: var(--muted, #6D627E);
  max-width: none;
}

[data-page="product"] .pdp-accordion-item.is-open .pdp-accordion__panel {
  display: block;
}

[data-page="product"] .pdp-accordion__panel p {
  margin: 0 0 0.75rem;
  max-width: none;
}

[data-page="product"] .pdp-accordion__panel p:last-child {
  margin-bottom: 0;
}

[data-page="product"] .pdp-accordion__panel ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

[data-page="product"] .pdp-accordion__panel li {
  margin-bottom: 0.35rem;
}

/* ================================================================
   Trust section - keep but no badges/stars/rounded cards
================================================================ */

[data-page="product"] .pdp-trust {
  display: none; /* hidden - brief says nothing else in the stack */
}

/* ================================================================
   Mobile overrides
================================================================ */

@media (max-width: 480px) {
  [data-page="product"] .pdp-atb-btn {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
  }

  /* The gallery fills the content column and no more. The wrapper keeps
     its horizontal padding, so the image never runs edge to edge. */
  [data-page="product"] .pdp-gallery,
  [data-page="product"] .pdp-gallery__main {
    max-width: 100%;
  }

  [data-page="product"] .pdp-gallery__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
}


/* ----------------------------------------------------------------
   Touch targets

   The service links and the read more control render 18px tall, under the
   24px WCAG 2.5.8 minimum for a standalone target. Vertical padding lifts
   the hit area to 44px. They keep no fill, no border and no radius, so
   they still read as plain text, not as controls.
----------------------------------------------------------------- */
[data-page="product"] .pdp-service__label,
[data-page="product"] .pdp-desc__read-more {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}