/*
Theme Name: BLNT BLVR
Theme URI: https://blntblvr.com
Author: BLNT BLVR
Description: One-page apparel storefront for BLNT BLVR with a slide-out cart and Stripe Checkout. Products are defined in inc/products.php; Stripe keys are set under Settings > BLNT BLVR Store.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: blnt-blvr
*/

  :root{
    --paper:#F3EDE1;
    --card:#FBF8F1;
    --green:#1F3D2B;
    --sage:#5F7A5E;
    --sand:#E4D3B3;
    --sand-line:#D8C3A0;
    --brown:#6B4A32;
    --orange:#B8481A;
    --ink:#151412;
    --tile-bg:#E7E1D3;
    --muted:#6b6a66;
    --font-display:'Graduate','Rockwell',Georgia,serif;
    --font-body:'Barlow Condensed','Arial Narrow',sans-serif;
  }
  *{box-sizing:border-box;}
  /* ---- Page centering ----
     The storefront is a fixed-width column that sits in the exact middle of
     the browser window: horizontally always (equal black gutters left and
     right at every viewport width), and vertically whenever the content is
     shorter than the window (e.g. very tall monitors). */
  html{
    background:#000;
    -webkit-text-size-adjust:100%;
  }
  body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    background:#000;
    font-family:var(--font-body);
    font-size:16px;
    color:var(--ink);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .page{
    flex:0 0 auto;
    width:100%;
    max-width:1080px;
    margin-left:auto;
    margin-right:auto;
    background:var(--paper);
    overflow-x:clip;
  }
  img{max-width:100%;}
  [hidden]:not([hidden=until-found i]){display:none!important}

  /* ---- Announcement bar ---- */
  .announce{
    background:var(--ink);
    color:#fff;
    text-align:center;
    font-size:16px;
    letter-spacing:0.08em;
    padding:8px 0;
    text-transform:uppercase;
    font-weight:600;
  }

  /* ---- Header ---- */
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 24px;
  }
  .header-label{
    font-size:14px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--orange);
    font-weight:700;
  }
  .logo-mark{
    height:52px;
    width:auto;
    display:block;
  }
  .cart-indicator{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--green);
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    font-family:inherit;
  }
  .cart-indicator .cart-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border-radius:50%;
    background:var(--orange);
    color:#fff;
    font-size:14px;
    font-weight:700;
  }

  /* ---- Drop strip ---- */
  .drop-strip{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    background:var(--green);
    color:var(--card);
    padding:10px 24px;
    text-align:center;
  }
  .drop-strip p{
    margin:0;
    font-size:16px;
    letter-spacing:0.02em;
  }
  .drop-strip p strong{
    color:var(--sand);
  }
  .drop-strip a.drop-btn{
    background:var(--orange);
    color:#fff;
    border:none;
    padding:7px 16px;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-block;
  }

  /* ---- Hero ---- */
  .hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    position:relative;
    height:min(56vw, 420px);
    min-height:280px;
  }
  .hero-panel{
    position:relative;
    overflow:hidden;
    height:100%;
    min-width:0;
  }
  .hero-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .hero-panel--dark{
    background:var(--sand);
  }
  /* soft ground shadow so garments stay anchored/defined regardless of how
     close the garment color sits to this backdrop - shows through the
     transparent margins of a cutout PNG */
  .hero-panel--dark::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:10%;
    width:55%;
    height:12%;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(21,20,18,0.22), rgba(21,20,18,0) 72%);
    pointer-events:none;
  }
  .hero-panel--dark::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(21,20,18,0), rgba(21,20,18,0.10));
    pointer-events:none;
  }
  .hero-panel--light{
    background:#e9e7e2;
  }
  .hero-panel--light::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12));
    pointer-events:none;
  }
  .hero-copy{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
    width:90%;
    pointer-events:none;
    z-index:5;
  }
  .hero-copy h1{
    font-family:var(--font-display);
    font-size:clamp(32px, 4vw, 48px);
    line-height:1.1;
    margin:0 0 10px 0;
    text-transform:uppercase;
    letter-spacing:0.01em;
    text-shadow:
      0 1px 3px rgba(0,0,0,0.55),
      0 2px 10px rgba(0,0,0,0.35);
  }
  .hero-copy .rule{
    width:64px;
    height:2px;
    background:var(--orange);
    margin:14px auto;
    border:none;
  }
  /* Sits on its own, straddling the hero/section-heading boundary so the
     orange accent line below (.section-heading::before) visually runs
     through the top edge of the badge rather than stacking as two
     separate marks. .hero has no overflow:hidden so this is free to
     hang slightly below the hero box. */
  .hero-fineprint{
    position:absolute;
    left:50%;
    bottom:-36px;
    transform:translateX(-50%);
    font-size:14px;
    color:#fff;
    background:var(--orange);
    display:inline-block;
    padding:3px 12px;
    font-weight:600;
    letter-spacing:0.02em;
    text-align:center;
    white-space:nowrap;
    width:max-content;
    pointer-events:none;
    z-index:5;
  }
  /* Pulled out of .hero-copy's centered stack so it can sit on its own,
     just above the fineprint badge/line instead of mid-hero under the
     rule. Padding tightened to hug the label. Shifted down by the same
     amount as the fineprint badge below so the gap between the two
     stays the one already confirmed as correct. */
  .hero-cta{
    position:absolute;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    pointer-events:auto;
    font-family:var(--font-body);
    background:var(--green);
    color:#fff;
    border:none;
    padding:8px 16px;
    font-size:14px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:7px;
    z-index:5;
    white-space:nowrap;
  }
  .hero-cta:hover{
    background:#16281c;
  }

  #hero-dynamic-img{
    transition:opacity 0.15s ease-in-out;
    /* ghost-mannequin cutouts: show the whole garment rather than letting
       cover-crop clip the hood/hem; backdrop color + shadow show through
       the transparent margins */
    object-fit:contain;
    padding:6%;
  }

  /* ---- Product sections ---- */
  .section-heading{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:22px 24px 8px 24px;
    position:relative;
    /* Own stacking context, above the hero-fineprint badge (z-index:5),
       so the orange accent line below paints over the top edge of the
       badge where the two overlap at the hero boundary. */
    z-index:6;
  }
  .section-heading::before{
    content:"";
    position:absolute;
    top:0;
    left:24px;
    right:24px;
    height:3px;
    background:var(--orange);
  }
  .section-heading h2{
    font-size:16px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin:0;
    color:var(--orange);
  }
  .section-heading .section-count{
    font-size:14px;
    color:var(--muted);
    letter-spacing:0.05em;
    text-transform:uppercase;
  }
  .grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap:1px;
    background:var(--sand-line);
    border-top:2px solid var(--ink);
    border-bottom:2px solid var(--ink);
    margin-bottom:22px;
  }
  .tile{
    background:var(--tile-bg);
    padding:14px 14px 16px 14px;
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  .tile-imgbtn{
    background:none;
    border:none;
    padding:0;
    margin:0;
    cursor:pointer;
    display:block;
    width:100%;
    font-family:inherit;
    text-align:left;
  }
  .tile img{
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    object-fit:contain;
    margin-bottom:10px;
    background:var(--tile-bg);
    display:block;
  }
  .tile.active .tile-imgbtn img{
    outline:2px solid var(--orange);
    outline-offset:-2px;
  }
  .tile .product-name{
    font-size:16px;
    font-weight:700;
    color:var(--ink);
    line-height:1.25;
    margin:0 0 2px 0;
  }
  .tile .product-meta{
    font-size:14px;
    color:var(--muted);
    letter-spacing:0.03em;
    margin:0 0 8px 0;
  }
  .visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .tile .size-select{
    display:block;
    width:100%;
    margin:0 0 10px 0;
    padding:6px 8px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink);
    background:var(--card);
    border:1px solid var(--sand-line);
    cursor:pointer;
  }
  .tile .size-select:invalid{
    color:var(--muted);
  }
  .tile .price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:16px;
    gap:8px;
    flex-wrap:wrap;
    margin-top:auto;
  }
  .tile .price-row .price{
    font-weight:700;
    color:var(--green);
    flex-shrink:0;
  }
  .tile .cart-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-width:92px;
    white-space:nowrap;
    flex-shrink:0;
    background:var(--green);
    color:#fff;
    border:none;
    padding:8px 10px;
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    letter-spacing:0.05em;
    text-transform:uppercase;
    cursor:pointer;
    font-family:inherit;
    transition:background 0.15s ease;
  }
  .tile .cart-btn:hover:not(:disabled){
    background:#16281c;
  }
  .tile .cart-btn.added{
    background:var(--orange);
  }
  .tile .cart-btn:disabled{
    background:var(--muted);
    cursor:not-allowed;
    opacity:0.6;
  }

  /* ---- Footer ---- */
  footer{
    padding:10px 24px 34px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  .barcode-divider{
    width:100%;
    display:flex;
    justify-content:center;
    padding:6px 24px 18px 24px;
  }
  .barcode-divider svg{
    height:28px;
    width:auto;
  }
  .footer-rule{
    width:64px;
    height:2px;
    background:var(--orange);
    border:none;
    margin:0 0 4px 0;
  }
  .footer-nav{
    display:flex;
    gap:18px;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--green);
  }
  .footer-nav a{
    color:inherit;
    text-decoration:none;
  }
  .footer-nav a:hover{
    color:var(--orange);
  }
  .footer-social{
    display:flex;
    gap:18px;
    font-size:14px;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .footer-social a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:inherit;
    text-decoration:none;
  }
  .footer-social a svg{
    width:16px;
    height:16px;
    flex-shrink:0;
  }
  .footer-social a:hover{
    color:var(--orange);
  }
  .crest-mark{
    display:flex;
    align-items:center;
    gap:8px;
    opacity:0.85;
  }
  .crest-mark img{
    width:34px;
    height:auto;
    display:block;
  }
  .crest-mark .crest-caption{
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ---- Cart ---- */
  .cart-overlay{
    position:fixed;
    inset:0;
    background:rgba(21,20,18,0.45);
    z-index:40;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
  }
  .cart-overlay.open{
    opacity:1;
    pointer-events:auto;
  }
  .cart-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(380px, 92vw);
    background:var(--card);
    z-index:50;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform 0.25s ease;
    box-shadow:-8px 0 24px rgba(21,20,18,0.18);
  }
  .cart-drawer.open{
    transform:translateX(0);
  }
  .cart-drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    border-bottom:2px solid var(--ink);
    flex-shrink:0;
  }
  .cart-drawer-header h2{
    font-family:var(--font-display);
    font-size:22px;
    text-transform:uppercase;
    margin:0;
    color:var(--ink);
  }
  .cart-close{
    background:none;
    border:none;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    color:var(--ink);
    padding:4px;
    font-family:inherit;
  }
  .cart-items{
    flex:1;
    overflow-y:auto;
    padding:4px 20px;
  }
  .cart-empty{
    font-size:16px;
    color:var(--muted);
    padding:24px 0;
    text-align:center;
  }
  .cart-item{
    display:flex;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid var(--sand-line);
  }
  .cart-item img{
    width:56px;
    height:56px;
    object-fit:contain;
    background:var(--tile-bg);
    flex-shrink:0;
  }
  .cart-item-info{
    flex:1;
    min-width:0;
  }
  .cart-item-name{
    font-size:16px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 2px 0;
  }
  .cart-item-meta{
    font-size:14px;
    color:var(--muted);
    margin:0 0 8px 0;
  }
  .cart-item-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .qty-stepper{
    display:flex;
    align-items:center;
    border:1px solid var(--sand-line);
  }
  .qty-stepper button{
    width:24px;
    height:24px;
    border:none;
    background:none;
    font-size:16px;
    cursor:pointer;
    color:var(--ink);
    font-family:inherit;
  }
  .qty-stepper button:hover{
    background:var(--sand);
  }
  .qty-stepper .qty-value{
    min-width:20px;
    text-align:center;
    font-size:14px;
  }
  .cart-item-price{
    font-size:16px;
    font-weight:700;
    color:var(--green);
  }
  .cart-item-remove{
    background:none;
    border:none;
    font-size:14px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--orange);
    cursor:pointer;
    padding:0;
    margin-top:6px;
    font-family:inherit;
  }
  .cart-footer{
    padding:16px 20px 22px 20px;
    border-top:2px solid var(--ink);
    flex-shrink:0;
  }
  .cart-subtotal{
    display:flex;
    justify-content:space-between;
    font-size:16px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:12px;
  }
  .cart-checkout-btn{
    width:100%;
    background:var(--green);
    color:#fff;
    border:none;
    padding:12px;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
    font-family:inherit;
  }
  .cart-checkout-btn:hover:not(:disabled){
    background:#16281c;
  }
  .cart-checkout-btn:disabled{
    opacity:0.5;
    cursor:not-allowed;
  }
  .cart-error{
    margin-top:10px;
    font-size:14px;
    color:var(--orange);
    line-height:1.4;
  }

  /* ---- Info modal (About / Shipping / Returns / Contact) ---- */
  .info-overlay{
    position:fixed;
    inset:0;
    background:rgba(21,20,18,0.5);
    z-index:60;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
  }
  .info-overlay.open{
    opacity:1;
    pointer-events:auto;
  }
  .info-modal{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-48%);
    width:min(560px, 92vw);
    max-height:min(640px, 84vh);
    background:var(--card);
    z-index:70;
    display:flex;
    flex-direction:column;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
    box-shadow:0 12px 40px rgba(21,20,18,0.28);
  }
  .info-modal.open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%);
  }
  .info-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    border-bottom:2px solid var(--ink);
    flex-shrink:0;
  }
  .info-modal-header h2{
    font-family:var(--font-display);
    font-size:22px;
    text-transform:uppercase;
    margin:0;
    color:var(--ink);
  }
  .info-close{
    background:none;
    border:none;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    color:var(--ink);
    padding:4px;
    font-family:inherit;
  }
  .info-modal-body{
    flex:1;
    overflow-y:auto;
    padding:20px 22px 26px 22px;
    font-size:16px;
    line-height:1.55;
    color:var(--ink);
  }
  .info-modal-body[hidden]{
    display:none;
  }
  .info-modal-body h3{
    font-family:var(--font-display);
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:0.02em;
    color:var(--green);
    margin:18px 0 6px 0;
  }
  .info-modal-body h3:first-child{
    margin-top:0;
  }
  .info-modal-body p{
    margin:0 0 10px 0;
  }
  .info-modal-body p.muted{
    color:var(--muted);
    font-size:16px;
  }
  .info-modal-body em.define{
    display:block;
    font-style:italic;
    color:var(--muted);
    font-size:16px;
    margin:0 0 14px 0;
    padding-left:12px;
    border-left:2px solid var(--sand-line);
  }
  .info-modal-body ul{
    margin:0 0 12px 0;
    padding-left:18px;
  }
  .info-modal-body li{
    margin-bottom:5px;
  }
  .info-modal-body a{
    color:var(--orange);
    font-weight:600;
  }
  .info-modal-body .tm{
    font-size:0.6em;
    vertical-align:super;
  }
  .info-modal-body hr.rule{
    width:48px;
    height:2px;
    background:var(--orange);
    border:none;
    margin:0 0 16px 0;
  }
  .info-modal-body .email-link{
    display:inline-block;
    font-weight:700;
    color:var(--green);
    background:var(--sand);
    padding:6px 12px;
    text-decoration:none;
    margin:4px 0 14px 0;
  }
  .info-modal-body table.ship-table{
    width:100%;
    border-collapse:collapse;
    margin:4px 0 14px 0;
    font-size:16px;
  }
  .info-modal-body table.ship-table th,
  .info-modal-body table.ship-table td{
    text-align:left;
    padding:6px 8px;
    border-bottom:1px solid var(--sand-line);
  }
  .info-modal-body table.ship-table th{
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:0.05em;
  }

  /* ---- Phone layout ---- */
  @media (max-width: 640px){
    .grid{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .hero{
      height:min(130vw, 560px);
      min-height:420px;
      grid-template-columns:1fr;
      grid-template-rows:1fr 1fr;
    }
    .hero-copy h1{
      font-size:clamp(30px, 8vw, 36px);
    }
    .hero-fineprint{
      font-size:14px;
      bottom:-14px;
      white-space:normal;
      width:auto;
      max-width:92%;
    }
    .hero-cta{
      bottom:24px;
      font-size:14px;
      padding:7px 14px;
    }
    .logo-mark{
      height:42px;
    }
    .section-heading{
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
    }
    .drop-strip{
      flex-direction:column;
      gap:8px;
    }
  }

  /* ---- WordPress adjustments ---- */
  .admin-bar .cart-drawer{top:32px;}
  @media (max-width:782px){ .admin-bar .cart-drawer{top:46px;} }

  /* Checkout result banner (shown after returning from Stripe) */
  .checkout-banner{
    background:var(--green);
    color:#fff;
    text-align:center;
    padding:12px 16px;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.04em;
  }
  .checkout-banner--cancel{background:var(--brown);}
  .checkout-banner button{
    margin-left:12px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.6);
    color:#fff;
    font:inherit;
    font-size:14px;
    padding:2px 10px;
    cursor:pointer;
  }

  .screen-reader-text{
    border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
    height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;
    word-wrap:normal!important;
  }