/* =====================================================================
   Dizzas Collection — Checkout styling  v2
   Stronger layout enforcement (beats theme.css), higher-contrast cards,
   and clean-up for the Material-icon text.
   Scoped to #checkout. Load AFTER theme.css. REPLACES v1.
   ===================================================================== */

#checkout {
  --ck-ink:      #0a0a0a;
  --ck-mid:      #8c8c8c;
  --ck-line:     #dad7d0;
  --ck-line-2:   #c9c6bf;
  --ck-card:     #ffffff;
  --ck-bg:       #f4f2ef;
  --ck-accent:   #b8963e;
  --ck-accent-d: #8a6e2a;
  --ck-sans:     'Montserrat', Helvetica, sans-serif;
  --ck-serif:    'Cormorant Garamond', Georgia, serif;
  background: var(--ck-bg);
  font-family: var(--ck-sans);
  color: var(--ck-ink);
}

/* ---- Force the two-column, centred layout over theme.css ------------ */
#checkout .container { max-width: 1120px !important; margin: 0 auto !important; }

#checkout .checkout.cart-grid,
#checkout .cart-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 36px !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
#checkout .cart-grid-body  { flex: 1 1 540px !important; min-width: 0 !important; max-width: 100% !important; }
#checkout .cart-grid-right { flex: 0 0 330px !important; max-width: 330px !important; }

@media (max-width: 960px) {
  #checkout .cart-grid-right { flex-basis: 100% !important; max-width: 100% !important; }
}

#checkout .cart-grid-body-up {
  display: inline-block; margin-bottom: 24px;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ck-mid); text-decoration: none;
}
#checkout .cart-grid-body-up:hover { color: var(--ck-ink); }

/* ---- Step cards (now visible) --------------------------------------- */
#checkout .checkout-step {
  background: var(--ck-card) !important;
  border: 1px solid var(--ck-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  overflow: hidden;
}
#checkout .checkout-step.-current { border-color: var(--ck-ink) !important; }
#checkout .checkout-step.-unreachable { opacity: 0.4; }

#checkout .checkout-step .step-title,
#checkout .checkout-step .step-title.h3 {
  display: flex !important; align-items: center; gap: 15px;
  margin: 0 !important; padding: 22px 28px !important;
  font-family: var(--ck-serif) !important; font-weight: 500;
  font-size: 1.45rem !important; letter-spacing: 0.01em; color: var(--ck-ink);
}

#checkout .step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--ck-line-2);
  border-radius: 50%; font-family: var(--ck-sans);
  font-size: 0.78rem; font-weight: 600; color: var(--ck-mid); flex: 0 0 auto;
}
#checkout .checkout-step.-current .step-number,
#checkout .checkout-step.-complete .step-number {
  background: var(--ck-ink); border-color: var(--ck-ink); color: #fff;
}

#checkout .step-edit {
  margin-left: auto; font-family: var(--ck-sans);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ck-mid); cursor: pointer;
}
#checkout .step-edit:hover { color: var(--ck-accent-d); }

#checkout .checkout-step .content { padding: 4px 28px 28px !important; }

/* ---- Hide broken Material-icon ligatures (font not loaded by theme) -- */
#checkout i.material-icons,
#checkout .material-icons { font-size: 0 !important; line-height: 0; color: transparent; }
#checkout .step-edit i.material-icons::before { content: "\270E"; font-size: 13px; color: var(--ck-mid); }

/* ---- Form fields ---------------------------------------------------- */
#checkout .form-group { margin-bottom: 18px !important; }
#checkout label,
#checkout .form-control-label {
  display: block; margin-bottom: 7px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ck-mid);
}
#checkout .form-control,
#checkout input[type="text"], #checkout input[type="email"],
#checkout input[type="password"], #checkout input[type="tel"],
#checkout input[type="number"], #checkout select, #checkout textarea {
  width: 100% !important; height: 50px !important; padding: 0 15px !important;
  background: #fff !important; border: 1px solid var(--ck-line) !important;
  border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--ck-sans); font-size: 0.92rem; color: var(--ck-ink);
  appearance: none; -webkit-appearance: none;
}
#checkout textarea { height: auto !important; padding: 13px 15px !important; min-height: 100px; }
#checkout .form-control:focus, #checkout input:focus,
#checkout select:focus, #checkout textarea:focus {
  outline: none !important; border-color: var(--ck-ink) !important;
}
#checkout select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238c8c8c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px !important;
}

/* Inline labels (radios/checkboxes/payment) shouldn't be uppercase */
#checkout .custom-radio + label,
#checkout .custom-checkbox label,
#checkout .payment-options label,
#checkout .radio-label {
  display: inline; text-transform: none; letter-spacing: 0;
  font-size: 0.9rem; font-weight: 500; color: var(--ck-ink);
}

#checkout .address-item, #checkout .delivery-option,
#checkout .payment-options .payment-option {
  border: 1px solid var(--ck-line) !important; border-radius: 0 !important;
  background: #fff; padding: 16px 18px; margin-bottom: 12px;
}
#checkout .address-item.selected,
#checkout .delivery-option:hover,
#checkout .payment-options .payment-option:hover { border-color: var(--ck-ink) !important; }

/* ---- Buttons -------------------------------------------------------- */
#checkout .btn-primary, #checkout button[type="submit"],
#checkout .continue, #checkout #payment-confirmation .btn,
#checkout .promo-code .btn, #checkout [name="continue"] {
  min-height: 52px !important; padding: 0 36px !important;
  background: var(--ck-ink) !important; border: 1px solid var(--ck-ink) !important;
  border-radius: 0 !important; color: #fff !important; box-shadow: none !important;
  font-family: var(--ck-sans) !important; font-size: 0.72rem !important;
  font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important;
  cursor: pointer;
}
#checkout .btn-primary:hover, #checkout button[type="submit"]:hover,
#checkout .continue:hover, #checkout #payment-confirmation .btn:hover {
  background: var(--ck-accent) !important; border-color: var(--ck-accent) !important;
}
#checkout .btn-secondary, #checkout .btn-tertiary {
  background: transparent !important; border: 1px solid var(--ck-line-2) !important;
  border-radius: 0 !important; color: var(--ck-ink) !important;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 600;
}

/* ---- Order summary (right) ------------------------------------------ */
#checkout .cart-grid-right .card,
#checkout .checkout-summary-wrapper,
#checkout .cart-summary {
  position: sticky; top: 26px;
  background: var(--ck-card) !important; border: 1px solid var(--ck-line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 24px 22px !important;
}
#checkout .cart-summary-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.88rem; }
#checkout .cart-total, #checkout .cart-summary-totals .cart-total {
  border-top: 1px solid var(--ck-line); margin-top: 8px; padding-top: 14px;
}
#checkout .cart-total .label, #checkout .cart-total .value {
  font-family: var(--ck-serif); font-size: 1.2rem; font-weight: 500;
}
#checkout .cart-summary-products img { border: 1px solid var(--ck-line); }
#checkout .promo-code, #checkout .block-promo { border-top: 1px solid var(--ck-line); margin-top: 14px; padding-top: 14px; }

#checkout .card { box-shadow: none !important; }
#checkout hr { border-color: var(--ck-line); }

/* =====================================================================
   v3 additions — Step 1 account choice (login-first, Hugo Boss style)
   ===================================================================== */
#checkout .dc-personal { max-width: 560px; }

#checkout .dc-block-title {
  font-family: var(--ck-sans);
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ck-ink); margin: 0 0 20px;
}

#checkout .dc-sep { border: 0; border-top: 1px solid var(--ck-line); margin: 30px 0; }

#checkout .dc-alt-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }

#checkout .dc-register-btn {
  width: 100%; min-height: 52px; background: transparent; color: var(--ck-ink);
  border: 1px solid var(--ck-ink); border-radius: 0;
  font-family: var(--ck-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  transition: background var(--transition,.25s), color var(--transition,.25s);
}
#checkout .dc-register-btn:hover { background: var(--ck-ink); color: #fff; }

#checkout .dc-guest-link {
  display: inline-block; font-family: var(--ck-sans);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ck-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
#checkout .dc-guest-link:hover { color: var(--ck-accent-d); }

/* Login submit full-width (override PrestaShop's float-right) */
#checkout .dc-login-block .form-footer { text-align: left; }
#checkout .dc-login-block .continue,
#checkout .dc-login-block button[type="submit"] { float: none !important; width: 100%; }
#checkout .dc-login-block .forgot-password { text-align: right; margin: -6px 0 14px; }
#checkout .dc-login-block .forgot-password a { font-size: 0.8rem; color: var(--ck-mid); }

/* Reveal logic (works even before JS runs: customer block hidden by default) */
#checkout .dc-customer-block { display: none; }
#checkout .dc-personal[data-dc-mode="register"] .dc-login-block,
#checkout .dc-personal[data-dc-mode="register"] .dc-sep,
#checkout .dc-personal[data-dc-mode="register"] .dc-alt-actions,
#checkout .dc-personal[data-dc-mode="guest"]    .dc-login-block,
#checkout .dc-personal[data-dc-mode="guest"]    .dc-sep,
#checkout .dc-personal[data-dc-mode="guest"]    .dc-alt-actions { display: none; }
#checkout .dc-personal[data-dc-mode="register"] .dc-customer-block,
#checkout .dc-personal[data-dc-mode="guest"]    .dc-customer-block { display: block; }

/* Back link */
#checkout .dc-back-row { margin-top: 18px; }
#checkout .dc-back-row a {
  font-family: var(--ck-sans); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ck-mid); text-decoration: none;
}
#checkout .dc-back-row a:hover { color: var(--ck-ink); }

/* =====================================================================
   v3.1 — Single-carrier shipping step
   Hide ONLY the carrier options block (.delivery-options: logo, name,
   "10-15 business days" delay, price and radio). Keep everything else:
   the order-comment box (#delivery, inside the sibling .order-options) and
   the Continue button — both of which live INSIDE the #js-delivery form, so
   we must NOT hide that form or .delivery-options-list.
   The radio inside .delivery-options is pre-checked and still submits while
   hidden (and is force-checked by the safety script in
   personal-information.tpl), so the order keeps its carrier.
   ===================================================================== */
#checkout #checkout-delivery-step .delivery-options {
  display: none !important;
}


/* =========================================================================
   Dizzas Collection — Payment step tidy-up
   Append to: themes/dizzascollection/assets/css/checkout-style-v3.css
   Then bump the cache version in the <link> from ?v=4 to ?v=5.
   Everything is scoped to #checkout-payment-step so nothing else is affected.
   ========================================================================= */

/* 1. Hide no-JS fallbacks + the redundant generic confirm button.
      ps_checkout supplies its own PayPal / Card buttons, so PrestaShop's stock
      "Order with an obligation to pay" button is not the real CTA here.
      (To bring it back, delete these two rules.) */
#checkout-payment-step .ps-hidden-by-js { display: none !important; }
#checkout-payment-step #payment-confirmation { display: none !important; }

/* 2. Stray Bootstrap modal close "x" leaking onto the page */
#checkout-payment-step .modal:not(.show) { display: none !important; }

/* 3. Payment option rows -> neat bordered cards */
#checkout-payment-step .payment-options { margin: 0 0 1.75rem; }

#checkout-payment-step .payment-option {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e2e0db;
  border-radius: 6px;
  margin-bottom: .75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#checkout-payment-step .payment-option:hover { border-color: #b8963e; }
#checkout-payment-step .payment-option:focus-within {
  border-color: #b8963e;
  box-shadow: 0 0 0 2px rgba(184, 150, 62, .15);
}

#checkout-payment-step .payment-option label {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex: 1;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}
#checkout-payment-step .payment-option label span { font-weight: 500; }
#checkout-payment-step .payment-option img { height: 26px; width: auto; }

/* keep the radio neatly inline rather than floated */
#checkout-payment-step .payment-option .custom-radio {
  float: none;
  margin: 0;
  flex: 0 0 auto;
}

/* 4. Terms & conditions row — align checkbox + de-shout the label */
#checkout-payment-step #conditions-to-approve ul {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
}
#checkout-payment-step #conditions-to-approve li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
#checkout-payment-step #conditions-to-approve .custom-checkbox { float: none; margin: 0; }
#checkout-payment-step .condition-label { margin: 0; }
#checkout-payment-step .condition-label label {
  text-transform: none;      /* kill the all-caps */
  letter-spacing: 0;
  font-size: .9rem;
  line-height: 1.45;
  color: #0a0a0a;
  margin: 0;
}
#checkout-payment-step .condition-label a {
  color: #b8963e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 5. ps_checkout smart buttons — constrain width, centre, add breathing room */
#checkout-payment-step .js-payment-binary {
  max-width: 460px;
  margin: 1rem auto 0;
}
#checkout-payment-step .ps_checkout-button { margin: 0 auto; }

/* 6. General spacing for the step body */
#checkout-payment-step .content { padding-top: .5rem; }

/* =====================================================================
   v3 additions — order page tweaks
   1. Hide the blockreassurance module (#block-reassurance) on checkout only
   2. Keep the promo-code input + Add button on a single line
   ===================================================================== */

/* 1. Remove the "Security / Delivery / Return policy" reassurance block.
   Scoped to the order page so it still shows elsewhere (e.g. product pages). */
body.checkout #block-reassurance,
#checkout #block-reassurance,
.cart-grid #block-reassurance { display: none !important; }

/* 2. Promo code on one line --------------------------------------------
   The flex row + min-width:0 on the input stops it wrapping in the
   narrow summary column; the button padding is trimmed so it fits. */
#checkout .promo-code form,
#checkout .promo-code .input-group,
#checkout .promo-input-block,
#checkout .block-promo .promo-code form {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px;
  width: 100%;
}

#checkout .promo-code .input-group > .input-group-append,
#checkout .promo-code .input-group > .input-group-btn { display: flex; }

#checkout .promo-code input[type="text"],
#checkout .promo-code .promo-input,
#checkout .promo-code .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;   /* critical: lets the input shrink instead of wrapping */
  width: auto !important;
  margin: 0 !important;
}

#checkout .promo-code .btn,
#checkout .promo-code button[type="submit"] {
  flex: 0 0 auto !important;
  min-height: 48px !important;
  padding: 0 18px !important;   /* was 0 36px — too wide beside the input */
  white-space: nowrap !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------
   Promo code — hide the empty error alert and the "Close" link
   --------------------------------------------------------------------- */

/* Hide the promo error box while it has no message.
   PrestaShop reveals it with an inline display:block when there is a real
   error, and inline styles beat this rule, so genuine errors still show.
   The :has() rule is a belt-and-braces reveal for browsers that support it. */
#checkout .promo-code .js-error { display: none; }
#checkout .promo-code .js-error:has(.js-error-text:not(:empty)) { display: block; }

/* Remove the "Close" collapse link under the promo input
   (this only targets the Close link, not the "Have a promo code?" toggle). */
#checkout .promo-code .cancel-promo { display: none !important; }

/* ---------------------------------------------------------------------
   Order summary — Included taxes (small) on top with the divider,
   Total (VAT incl.) in its original large serif below.
   Position + divider only; fonts unchanged.
   --------------------------------------------------------------------- */
#checkout .cart-summary-totals { display: flex !important; flex-direction: column; }

/* Included taxes on top, Total below */
#checkout .cart-summary-totals .cart-summary-line:not(.cart-total) { order: 1; }
#checkout .cart-summary-totals .cart-total { order: 2; }

/* Divider above the top (Included taxes) line; remove it from Total */
#checkout .cart-summary-totals .cart-summary-line:not(.cart-total) {
  border-top: 1px solid var(--ck-line); margin-top: 8px; padding-top: 14px;
}
#checkout .cart-summary-totals .cart-total {
  border-top: 0 !important; margin-top: 0 !important; padding-top: 4px !important;
}

/* Make Total (VAT incl.) clearly larger than the Included taxes line */
#checkout .cart-summary-totals .cart-total .label,
#checkout .cart-summary-totals .cart-total .value {
  font-size: 1.5rem !important;
}

/* ---------------------------------------------------------------------
   Footer — hide the "Contact us" block (ps_contactinfo) on every page
   --------------------------------------------------------------------- */
#footer .block-contact { display: none !important; }

/* =====================================================================
   Classics category (id 3) — editorial hero, Hugo Boss register
   Background asset: /themes/dizzascollection/assets/img/classics-hero.jpg
   Markup injected by category.tpl when $category.id == 3.
   ===================================================================== */
.dc-classics-hero {
  position: relative;
  width: 100%;
  min-height: 360px;
  aspect-ratio: 24 / 10;
  max-height: 560px;
  display: flex;
  align-items: center;
  background: #000 url('/themes/dizzascollection/assets/img/classics-hero.jpg') right center / cover no-repeat;
  overflow: hidden;
}
/* legibility scrim — strongest on the left, where the copy sits */
.dc-classics-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.92) 0%, rgba(0,0,0,.66) 32%, rgba(0,0,0,0) 58%);
  pointer-events: none;
}
.dc-classics-hero__inner {
  position: relative; z-index: 1;
  padding: 0 clamp(20px, 7vw, 110px);
  max-width: 56%;
  color: #f4f4f2;
}
.dc-classics-hero__eyebrow {
  margin: 0;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .42em; text-transform: uppercase;
  color: #c8a96a;
}
.dc-classics-hero__eyebrow::after {
  content: ""; display: block;
  width: 64px; height: 2px; margin-top: 14px;
  background: #c8a96a;
}
.dc-classics-hero__title {
  margin: 0;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: .10em;
  line-height: 1;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  color: #f4f4f2;
}
.dc-classics-hero__sub {
  margin: 22px 0 0;
  max-width: 32ch;
  font-weight: 300;
  font-size: clamp(.95rem, 1.4vw, 1.12rem);
  line-height: 1.5;
  color: #a7a7a3;
}
.dc-classics-hero__cta {
  display: inline-block;
  margin-top: 30px;
  padding: 16px 34px;
  border: 1px solid rgba(244,244,242,.85);
  color: #f4f4f2;
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.dc-classics-hero__cta:hover { background: #f4f4f2; color: #0a0a0a; }

/* Tablet / mobile — drop the copy to the bottom over a vertical scrim,
   recentre the image so the focal tee stays in frame */
@media (max-width: 900px) {
  .dc-classics-hero {
    aspect-ratio: 16 / 11;
    max-height: none;
    background-position: center center;
  }
  .dc-classics-hero::before {
    background: linear-gradient(180deg,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,.88) 100%);
  }
  .dc-classics-hero__inner {
    max-width: 100%;
    align-self: flex-end;
    padding-bottom: 34px;
  }
  .dc-classics-hero__sub { max-width: 40ch; }
}
@media (max-width: 560px) {
  .dc-classics-hero { aspect-ratio: 4 / 5; }
  .dc-classics-hero__title { letter-spacing: .06em; }
  .dc-classics-hero__cta { letter-spacing: .2em; padding: 14px 26px; }
}

/* =====================================================================
   Original category (id 6) — full-bleed banner image
   Asset: /themes/dizzascollection/assets/img/originals-hero.jpg (1800x650)
   Shown at its own ratio so none of the five tees get cropped.
   ===================================================================== */
.dc-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dc-original-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1800 / 650;
  display: flex;
  align-items: center;
  background: #000 url('/themes/dizzascollection/assets/img/originals-hero.jpg') center center / cover no-repeat;
}
/* legibility scrim behind the copy on the left (light — shadow does the rest) */
.dc-original-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 26%, rgba(0,0,0,0) 48%);
  pointer-events: none;
}
/* soft shadow so the title/description stay legible over artwork */
.dc-original-hero .dc-classics-hero__title {
  text-shadow: 0 2px 18px rgba(0,0,0,.92), 0 1px 4px rgba(0,0,0,.85);
}
.dc-original-hero .dc-classics-hero__sub {
  text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.8);
}
@media (max-width: 900px) {
  .dc-original-hero::before {
    background: linear-gradient(180deg,
      rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,.86) 100%);
  }
}