/*
Theme Name: Ocean Activewear
Theme URI: https://oceanactivewear.co.za
Author: Ocean Activewear
Author URI: https://oceanactivewear.co.za
Description: The official theme for Ocean Activewear - Hot Girl Summer Collection. Fully responsive, squat-proof activewear catalog with integrated cart, modals, pre-order system, photo lightbox, and smooth navigation.
Version: 1.8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ocean-activewear
Tags: e-commerce, custom-background, custom-colors, custom-menu, featured-images, flexible-header, full-width-template, translation-ready
*/

:root {
      --font-serif: 'Cormorant Garamond', Georgia, serif;
      --font-script: 'Caveat', cursive;
      --font-heading: 'Outfit', sans-serif;
      --font-body: 'Plus Jakarta Sans', sans-serif;

      --ocean-navy: #0A2540;
      --ocean-deep: #00B4D8;
      --ocean-turquoise: #14FFEC;
      --ocean-baby-blue: #F0F9FF;
      --ocean-powder-blue: #E0F2FE;

      --sand-cream: #FAF8F5;
      --bg-main: #FAF8F5;
      --bg-card: #FFFFFF;
      --bg-header: rgba(250, 248, 245, 0.98);

      --text-primary: #1C1917;
      --text-secondary: #44403C;
      --text-muted: #78716C;

      --border-subtle: #E7E5E4;
      --shadow-sm: 0 4px 14px rgba(0,0,0,0.03);
      --shadow-md: 0 12px 30px rgba(0,0,0,0.06);
      --shadow-lg: 0 24px 50px rgba(0,0,0,0.12);

      --radius-full: 9999px;
      --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--font-body); background-color: var(--bg-main); color: var(--text-primary); line-height: 1.65; overflow-x: hidden; }
    
    h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--text-primary); letter-spacing: -0.01em; }
    .font-script { font-family: var(--font-script); font-weight: 600; }
    .font-serif { font-family: var(--font-serif); }

    button { cursor: pointer; border: none; outline: none; font-family: var(--font-heading); transition: var(--transition); }
    a { color: inherit; text-decoration: none; cursor: pointer; }
    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ocean-deep); outline-offset: 2px; }

    .container { max-width: 1320px; margin: 0 auto; padding: 0 2rem; }

    /* Top Ribbon */
    .announcement-ribbon {
      background: #1C1917; color: #FAF8F5; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.65rem 1.2rem;
      display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); position: relative; z-index: 110;
    }
    .ribbon-arrow { background: none; border: none; color: rgba(250,248,245,0.6); font-size: 1rem; cursor: pointer; padding: 0 0.4rem; transition: var(--transition); }
    .ribbon-arrow:hover { color: #FAF8F5; }

    /* Support Dropdown (Burnt Inspo) */
    .support-wrap { position: relative; display: inline-block; }
    .support-btn { background: none; border: none; color: #FAF8F5; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; transition: var(--transition); }
    .support-btn:hover { color: var(--ocean-powder-blue); }
    .support-btn svg { transition: transform 0.3s ease; }
    .support-wrap:hover .support-btn svg, .support-wrap:focus-within .support-btn svg, .support-wrap.active .support-btn svg { transform: rotate(180deg); }
    .support-dropdown-menu {
      position: absolute; top: calc(100% + 10px); right: 0; background: #FFFFFF; color: var(--text-primary);
      min-width: 230px; border-radius: 4px; border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px);
      transition: var(--transition); z-index: 150; padding: 0.5rem 0; text-align: left;
    }
    .support-wrap:hover .support-dropdown-menu, .support-wrap:focus-within .support-dropdown-menu, .support-dropdown-menu.active {
      opacity: 1; visibility: visible; transform: translateY(0);
    }
    .support-dropdown-item {
      display: block; width: 100%; background: none; border: none; text-align: left; padding: 0.65rem 1.2rem; font-family: var(--font-heading); font-size: 0.78rem;
      font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em;
      transition: var(--transition); text-decoration: none; cursor: pointer;
    }
    .support-dropdown-item:hover { background: var(--sand-cream); color: var(--ocean-deep); padding-left: 1.4rem; }

    /* Navbar */
    .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg-header); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); }
    .nav-content { display: flex; justify-content: space-between; align-items: center; height: 90px; }
    
    .brand-logo-wrap { text-align: center; cursor: pointer; display: block; }
    .brand-logo { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); }
    .brand-tagline { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-top: -3px; }

    .nav-links { display: flex; gap: 2.4rem; align-items: center; }
    .nav-link { font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.12em; padding: 0.3rem 0; position: relative; cursor: pointer; background: none; border: none; }
    .nav-link:hover, .nav-link.active { color: var(--ocean-deep); }
    .nav-link.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--ocean-deep); }

    .nav-actions { display: flex; align-items: center; gap: 1.2rem; }
    

    .nav-action-btn { background: none; border: none; font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: var(--transition); }
    .nav-action-btn:hover { color: var(--ocean-deep); }
    .icon-btn { background: none; border: none; color: var(--text-primary); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); }
    .icon-btn:hover { background: var(--ocean-powder-blue); color: var(--ocean-deep); transform: translateY(-1px); }
    .bag-count-badge { background: var(--ocean-deep); color: #FFF; font-size: 0.7rem; font-weight: 800; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

    /* Hero Banner */
    .hero-solstice { position: relative; min-height: 85vh; background: #0A2540; display: flex; align-items: center; overflow: hidden; }
    .hero-solstice::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 37, 64, 0.32) 0%, rgba(10, 37, 64, 0.15) 38%, transparent 68%); pointer-events: none; }
    .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 30%; filter: none; }
    .hero-overlay-content { position: relative; z-index: 2; width: 100%; padding: 4.5rem 2rem 3.5rem; }
    
    .hero-card-left { max-width: 680px; background: transparent; backdrop-filter: none; padding: 0; border-radius: 0; border: none; box-shadow: none; margin-top: 0; }
    .hero-tag { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 1.1rem; text-shadow: 0 1px 4px rgba(10, 37, 64, 0.45); }
    .hero-heading { font-family: 'Playfair Display', Georgia, serif; font-size: 4.6rem; font-weight: 400; line-height: 1.05; margin-bottom: 1.2rem; color: #FFFFFF; text-transform: none; letter-spacing: -0.01em; text-shadow: 0 2px 14px rgba(10, 37, 64, 0.4); }
    .hero-subtitle { font-family: var(--font-heading); font-size: 0.84rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 2.2rem; text-shadow: 0 1px 3px rgba(10, 37, 64, 0.65), 0 2px 10px rgba(10, 37, 64, 0.45); }

    .hero-btn { background: #5A83A6; color: #FFFFFF; padding: 1.15rem 2.6rem; font-family: var(--font-heading); font-weight: 500; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.24em; display: inline-flex; align-items: center; gap: 0.8rem; transition: var(--transition); border-radius: 2px; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.15); text-decoration: none; }
    .hero-btn:hover { background: #4A7294; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }

    @media (max-width: 768px) {
      .hero-heading { font-size: 2.8rem; line-height: 1.1; }
      .hero-tag { font-size: 0.75rem; letter-spacing: 0.32em; margin-bottom: 1rem; }
      .hero-subtitle { font-size: 0.68rem; letter-spacing: 0.26em; margin-bottom: 1.8rem; }
      .hero-btn { padding: 0.95rem 2rem; font-size: 0.75rem; letter-spacing: 0.2em; }
    }

    .btn-solstice { background: #00C9B7; color: #FFF; padding: 1.1rem 2.5rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.15em; display: inline-flex; align-items: center; gap: 0.75rem; transition: var(--transition); border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
    .btn-solstice:hover { background: #14FFEC; color: #0A2540; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }

    /* Feature Pillars */
    .feature-pillar-bar { background: #FFF; border-bottom: 1px solid var(--border-subtle); padding: 2.2rem 0; }
    .pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
    .pillar-item { display: flex; align-items: flex-start; gap: 1.1rem; padding: 0 1rem; border-right: 1px solid var(--border-subtle); }
    .pillar-item:last-child { border-right: none; }
    .pillar-icon { color: var(--ocean-deep); flex-shrink: 0; }
    .pillar-title { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); margin-bottom: 0.2rem; }
    .pillar-desc { font-size: 0.85rem; color: var(--text-muted); }

    /* Product Section */
    .bestsellers-section { padding: 6rem 0; background: #FFF; }
    .section-title-bar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.5rem; border-bottom: 1px solid var(--border-subtle); padding-bottom: 1.2rem; }
    .section-heading { font-size: 2.8rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); }

    .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 2.3rem; }
    .product-card { background: var(--sand-cream); border: 1px solid var(--border-subtle); border-radius: 4px; overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; position: relative; }
    .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--ocean-deep); }
    .card-img-wrap { position: relative; height: 360px; overflow: hidden; background: #E7E5E4; }
    .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }

    .card-content { padding: 1.4rem; display: flex; flex-direction: column; flex-grow: 1; background: #FFF; }
    .card-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
    .card-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; flex-grow: 1; }
    .card-price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .price-num { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }

    .size-select-box { width: 100%; background: var(--sand-cream); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 0.65rem 0.85rem; border-radius: 2px; font-size: 0.85rem; font-weight: 600; outline: none; margin-bottom: 0.85rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
    .btn-add-bag { width: 100%; background: var(--ocean-deep); color: #FFF; padding: 0.85rem; border-radius: 2px; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; }
    .btn-add-bag:hover { background: var(--ocean-navy); }

    /* Custom Form & Select Controls */
    .solstice-input, .solstice-select {
      width: 100%;
      background: var(--sand-cream);
      border: 1px solid var(--border-subtle);
      padding: 0.95rem 1.2rem;
      font-family: var(--font-body);
      font-size: 0.92rem;
      color: var(--text-primary);
      outline: none;
      border-radius: 2px;
      transition: var(--transition);
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    .solstice-input:focus, .solstice-select:focus {
      border-color: var(--ocean-deep);
      background: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(2, 128, 144, 0.12);
    }
    .select-wrapper {
      position: relative;
      width: 100%;
    }
    .select-wrapper::after {
      content: '▾';
      position: absolute;
      right: 1.2rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
      color: var(--text-muted);
      pointer-events: none;
    }

    .teaser-box { text-align: center; padding: 5rem 2rem; background: var(--sand-cream); border: 1px dashed var(--border-subtle); border-radius: 4px; grid-column: 1 / -1; }
    .teaser-heading { font-size: 2.8rem; margin-bottom: 1rem; color: var(--text-primary); }
    .teaser-sub { font-size: 1.1rem; color: var(--text-secondary); max-width: 550px; margin: 0 auto 2rem auto; }

    /* Cart Drawer */
    .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); z-index: 200; display: none; justify-content: flex-end; }
    .cart-overlay.open { display: flex; }
    .cart-drawer { width: 100%; max-width: 480px; height: 100%; background: #FFF; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
    .cart-header { padding: 1.6rem; border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; background: var(--sand-cream); }
    .shipping-meter-wrap { padding: 1.3rem 1.6rem; background: var(--ocean-powder-blue); border-bottom: 1px solid var(--border-subtle); }
    .meter-bg { height: 8px; background: rgba(2, 128, 144, 0.18); border-radius: var(--radius-full); overflow: hidden; margin-top: 0.5rem; }
    .meter-fill { height: 100%; background: var(--ocean-deep); transition: width 0.4s ease; }
    .cart-items-list { flex-grow: 1; overflow-y: auto; padding: 1.6rem; display: flex; flex-direction: column; gap: 1.2rem; }
    .cart-item { display: flex; gap: 1rem; background: var(--sand-cream); padding: 1.1rem; border-radius: 4px; border: 1px solid var(--border-subtle); }
    .cart-footer { padding: 1.6rem; border-top: 1px solid var(--border-subtle); background: var(--sand-cream); }
    .cart-qty-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
    .cart-qty-btn { width: 28px; height: 28px; background: #FFF; border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 1rem; line-height: 1; border-radius: 2px; }
    .cart-qty-btn:hover { border-color: var(--text-primary); }
    .cart-remove-btn { margin-left: auto; background: none; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: underline; }
    .cart-remove-btn:hover { color: var(--text-primary); }
    .cart-summary-row { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 0.35rem; }

    /* Page Views */
    .page-view { display: none; }
    .page-view.active-page { display: block !important; }

    /* Footer */
    .site-footer { background: #1C1917; color: #A8A29E; padding: 3.2rem 0 2rem 0; font-size: 0.88rem; }
    .footer-grid { display: grid; grid-template-columns: 1.1fr 1.8fr 0.9fr; gap: 3rem; margin-bottom: 2.2rem; }

    @media (max-width: 992px) {
      .pillar-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
      .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    }

    /* Mobile header: logo + icons on one row, page links underneath */
    @media (max-width: 860px) {
      .nav-content { flex-wrap: wrap; height: auto; padding-top: 0.9rem; padding-bottom: 0.5rem; row-gap: 0.6rem; }
      .brand-logo-wrap { order: 1; text-align: left; }
      .brand-logo { font-size: 1.6rem; }
      .brand-tagline { font-size: 0.55rem; letter-spacing: 0.18em; margin-top: 0; }
      .nav-actions { order: 2; gap: 0.3rem; }
      .nav-links { order: 3; width: 100%; justify-content: center; gap: 2rem; }
      .nav-link { font-size: 0.78rem; }
    }
    @media (max-width: 620px) {
      .container { padding: 0 1rem; }
      .hero-overlay-content { padding-left: 1rem; padding-right: 1rem; }
      .announcement-ribbon { font-size: 0.64rem; letter-spacing: 0.08em; padding: 0.55rem 0; }
      .announcement-ribbon .container { grid-template-columns: 1fr auto !important; gap: 0.75rem; }
      .announcement-ribbon .container > div:first-child { display: none; }
      .announcement-ribbon .container > div:nth-child(2) { justify-content: flex-start !important; text-align: left !important; }
      .brand-logo { font-size: 1.35rem; }
      .brand-tagline { font-size: 0.5rem; letter-spacing: 0.14em; }
      .nav-actions { gap: 0; }
      .icon-btn { width: 34px; height: 34px; }
      .nav-links { gap: 1.6rem; }
    }
  
    /* ===== Minimal single-product pre-order store ===== */
    #shopPage { background:#fff; }
    #shopPage .oa-store-shell { max-width:1140px; margin:0 auto; padding:34px 0 0; }
    
    
    
    #shopPage .oa-store-hero h1 {
      font-family:var(--font-serif); font-size:43px; line-height:1; font-weight:400;
      letter-spacing:.01em; text-transform:uppercase; margin:0 0 17px;
    }
    
    #shopPage .oa-store-hero-copy p {
      margin:0; max-width:610px; font-size:14px; line-height:1.5; color:#5d5853;
    }
    
    #shopPage .oa-store-hero-art::before {
      content:""; position:absolute; right:-44px; top:-16px; width:285px; height:290px;
      background:
        radial-gradient(ellipse at center, rgba(55,48,43,.10) 0 5%, transparent 5.7%),
        linear-gradient(55deg, transparent 46%, rgba(65,57,50,.09) 47% 50%, transparent 51%);
      transform:rotate(-9deg); filter:blur(.4px); opacity:.62;
    }
    #shopPage .oa-store-hero-art::after {
      content:""; position:absolute; right:-50px; top:20px; width:285px; height:18px;
      border-radius:999px; background:rgba(55,48,43,.10); transform:rotate(-34deg);
      box-shadow:
       -11px 39px 0 rgba(55,48,43,.08),
       -25px 79px 0 rgba(55,48,43,.065),
       -41px 119px 0 rgba(55,48,43,.05),
       -55px 159px 0 rgba(55,48,43,.035);
      opacity:.72;
    }
    

    #shopPage .oa-product {
      display:grid; grid-template-columns:minmax(0, 563px) 1fr; gap:46px;
      padding:15px 0 28px; align-items:start;
    }
    #shopPage .oa-gallery { display:flex; gap:12px; width:100%; max-width:563px; align-items:start; }
    #shopPage .oa-main-photo {
      flex:1;
      width:100%;
      max-width:520px;
      aspect-ratio:1122/1402;
      max-height:600px;
      overflow:hidden;
      background:#FAF8F5;
      position:relative;
      border-radius:4px;
      cursor:zoom-in;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    #shopPage .oa-main-photo img {
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      transition:transform 0.25s ease;
    }
    #shopPage .oa-main-photo:hover img {
      transform:scale(1.02);
    }
    .oa-zoom-badge {
      position:absolute;
      bottom:12px;
      right:12px;
      background:rgba(10,37,64,0.78);
      backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);
      color:#fff;
      padding:6px 12px;
      border-radius:20px;
      font-family:var(--font-heading);
      font-size:0.72rem;
      font-weight:600;
      letter-spacing:0.06em;
      display:flex;
      align-items:center;
      gap:6px;
      pointer-events:none;
      transition:all 0.2s;
    }
    #shopPage .oa-main-photo:hover .oa-zoom-badge {
      background:rgba(0,180,216,0.95);
      transform:scale(1.04);
    }
    #shopPage .oa-thumbs {
      display:flex;
      flex-direction:column;
      gap:10px;
      width:105px;
      flex:0 0 105px;
    }
    #shopPage .oa-thumb {
      border:2px solid transparent;
      padding:0;
      width:105px;
      aspect-ratio:1122/1402;
      overflow:hidden;
      background:#FAF8F5;
      cursor:pointer;
      border-radius:4px;
      transition:all 0.2s;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    #shopPage .oa-thumb:hover {
      border-color:rgba(0,180,216,0.5);
      transform:translateY(-1px);
    }
    #shopPage .oa-thumb.active {
      border-color:var(--ocean-deep);
    }
    #shopPage .oa-thumb img {
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
    }

    /* ── Product Photo Lightbox ── */
    .photo-lightbox {
      position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
      background:rgba(0,0,0,0.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    }
    .photo-lightbox.active { display:flex; }
    .photo-lightbox-close {
      position:absolute; top:1.2rem; right:1.4rem; z-index:402;
      background:none; border:none; color:#fff; font-size:2rem; cursor:pointer;
      width:44px; height:44px; display:flex; align-items:center; justify-content:center;
      opacity:0.75; transition:opacity 0.2s;
    }
    .photo-lightbox-close:hover { opacity:1; }
    .photo-lightbox-img-wrap {
      position:relative; max-width:85vw; max-height:85vh; display:flex; align-items:center; justify-content:center;
    }
    .photo-lightbox-img-wrap img {
      max-width:85vw; max-height:82vh; object-fit:contain; border-radius:6px;
      user-select:none; -webkit-user-select:none;
      animation:lbFadeIn 0.2s ease;
    }
    @keyframes lbFadeIn { from { opacity:0; transform:scale(0.97); } to { opacity:1; transform:scale(1); } }
    .photo-lightbox-arrow {
      position:absolute; top:50%; transform:translateY(-50%); z-index:401;
      background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2);
      color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer;
      display:flex; align-items:center; justify-content:center; font-size:1.3rem;
      opacity:0.7; transition:opacity 0.2s, background 0.2s;
      backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    }
    .photo-lightbox-arrow:hover { opacity:1; background:rgba(255,255,255,0.22); }
    .photo-lightbox-arrow.lb-prev { left:clamp(0.8rem, 3vw, 2.5rem); }
    .photo-lightbox-arrow.lb-next { right:clamp(0.8rem, 3vw, 2.5rem); }
    .photo-lightbox-dots {
      position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
      display:flex; gap:10px; z-index:401;
    }
    .photo-lightbox-dot {
      width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,0.6);
      background:transparent; cursor:pointer; padding:0; transition:background 0.2s, border-color 0.2s;
    }
    .photo-lightbox-dot.active { background:#fff; border-color:#fff; }
    @media (max-width:620px) {
      .photo-lightbox-arrow { width:38px; height:38px; font-size:1.1rem; }
      .photo-lightbox-img-wrap img { max-width:95vw; max-height:78vh; }
    }

    #shopPage .oa-product-info { padding-top:15px; max-width:538px; }
    #shopPage .oa-preorder-label {
      display:inline-block; background:#e6faff; color:#00a9c8;
      padding:5px 11px; font-family:var(--font-heading); font-size:11px; font-weight:800;
      letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px;
    }
    #shopPage .oa-product-title {
      font-family:var(--font-serif); font-size:39px; line-height:1; font-weight:400; margin:0 0 7px;
    }
    #shopPage .oa-price { font-family:var(--font-body); font-size:18px; font-weight:600; margin-bottom:3px; }
    #shopPage .oa-review-row {
      display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:13px; color:#6d6863;
    }
    #shopPage .oa-stars { letter-spacing:1px; color:#dedbd7; font-size:19px; line-height:1; }
    #shopPage .oa-description { font-size:14px; line-height:1.55; color:#57524d; margin:0 0 27px; max-width:485px; }
    #shopPage .oa-size-group { margin-bottom:16px; }
    #shopPage .oa-size-group label {
      display:block; font-family:var(--font-heading); font-size:12px; font-weight:700; color:#25211e; margin-bottom:8px;
    }
    #shopPage .oa-size-row { display:flex; gap:8px; flex-wrap:wrap; }
    #shopPage .oa-size {
      width:61px; height:32px; background:#fff; border:1px solid #d8d4cf; color:#655f59;
      font-family:var(--font-heading); font-size:11px; font-weight:500; border-radius:0;
    }
    #shopPage .oa-size:hover { border-color:#7b746e; color:#1c1917; }
    #shopPage .oa-size.selected { background:#1c1917; color:#fff; border-color:#1c1917; }
    #shopPage .oa-preorder-btn {
      width:100%; height:44px; margin-top:3px; background:#1c1917; color:#fff;
      font-family:var(--font-heading); font-size:12px; font-weight:700; letter-spacing:.15em;
      text-transform:uppercase; border-radius:0;
    }
    #shopPage .oa-preorder-btn:hover { background:#332f2b; }
    #shopPage .oa-assurances {
      display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:27px;
    }
    #shopPage .oa-assurance { display:flex; align-items:flex-start; gap:10px; min-width:0; }
    #shopPage .oa-assurance svg { flex:0 0 auto; margin-top:0; }
    #shopPage .oa-assurance strong {
      display:block; font-family:var(--font-heading); font-size:10px; line-height:1.15;
      font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px;
    }
    #shopPage .oa-assurance span { display:block; font-size:10px; line-height:1.25; color:#77706a; }

    #shopPage .oa-values {
      background:#fbfaf8; border-top:1px solid #efedea; margin-top:0;
    }
    #shopPage .oa-values-inner {
      max-width:1140px; min-height:115px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); align-items:center;
    }
    #shopPage .oa-value {
      height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center;
      border-right:1px solid #d8d4cf; text-align:center;
    }
    #shopPage .oa-value:last-child { border-right:0; }
    #shopPage .oa-value svg { margin-bottom:6px; }
    #shopPage .oa-value span {
      font-family:var(--font-serif); font-size:16px; line-height:1.05; letter-spacing:.08em; text-transform:uppercase;
    }

    @media (max-width:1180px) {
      #shopPage .oa-store-shell, #shopPage .oa-values-inner { max-width:calc(100% - 48px); }
      #shopPage .oa-product { grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:34px; }
      #shopPage .oa-gallery { width:100%; }
      #shopPage .oa-main-photo { width:100%; height:auto; aspect-ratio:1122/1402; }
      #shopPage .oa-thumb { width:95px; }
      #shopPage .oa-thumbs { width:95px; flex:0 0 95px; }
    }
    @media (max-width:900px) {
      
      
      
      #shopPage .oa-product { grid-template-columns:1fr; }
      #shopPage .oa-product-info { max-width:none; }
    }
    @media (max-width:620px) {
      #shopPage .oa-store-shell, #shopPage .oa-values-inner { max-width:calc(100% - 28px); }
      #shopPage .oa-store-shell { padding-top:24px; }
      #shopPage .oa-store-hero h1 { font-size:34px; }
      
      #shopPage .oa-product { padding-top:12px; gap:24px; }
      #shopPage .oa-gallery { flex-direction:column; }
      #shopPage .oa-thumbs { display:grid; grid-template-columns:repeat(3,1fr); width:100%; gap:8px; }
      #shopPage .oa-thumb { width:100%; aspect-ratio:1122/1402; }
      #shopPage .oa-product-title { font-size:34px; }
      #shopPage .oa-size { flex:1 1 48px; width:auto; }
      #shopPage .oa-assurances { grid-template-columns:1fr; gap:12px; }
      #shopPage .oa-values-inner { grid-template-columns:1fr; padding:18px 0; }
      #shopPage .oa-value { border-right:0; border-bottom:1px solid #d8d4cf; height:72px; }
      #shopPage .oa-value:last-child { border-bottom:0; }
    }

    /* Home Featured Product */
    .home-featured-product {
      display:grid;
      grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
      gap:3.5rem;
      align-items:center;
      padding:0;
      background:#fff;
    }
    .home-featured-image {
      display:block;
      width:100%;
      max-width:580px;
      aspect-ratio:1122/1402;
      padding:0;
      background:var(--sand-cream);
      border:0;
      border-radius:4px;
      overflow:hidden;
      cursor:pointer;
    }
    .home-featured-image img {
      display:block;
      width:100%;
      height:100%;
      aspect-ratio:1122/1402;
      object-fit:cover;
    }
    .home-featured-info { max-width:520px; padding-right:1rem; }
    .home-featured-label {
      display:inline-block;
      margin-bottom:1rem;
      padding:.34rem .7rem;
      background:var(--ocean-baby-blue);
      color:var(--ocean-deep);
      font-family:var(--font-heading);
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .home-featured-info h3 {
      font-size:3.25rem;
      line-height:1;
      margin-bottom:.55rem;
    }
    .home-featured-price {
      font-family:var(--font-heading);
      font-size:1.15rem;
      font-weight:600;
      margin-bottom:1.25rem;
    }
    .home-featured-info p {
      max-width:460px;
      color:var(--text-secondary);
      font-size:.98rem;
      line-height:1.7;
      margin-bottom:1.3rem;
    }
    .home-featured-note {
      font-size:.82rem;
      font-weight:700;
      color:var(--text-primary);
      margin-bottom:1.55rem;
    }
    .home-featured-actions { display:flex; gap:.75rem; align-items:center; }
    .home-featured-primary, .home-featured-secondary {
      padding:1rem 1.7rem;
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.13em;
      text-transform:uppercase;
      border-radius:0;
    }
    .home-featured-primary { background:#1C1917; color:#fff; }
    .home-featured-primary:hover { background:var(--ocean-deep); }
    .home-featured-secondary { background:#fff; color:#1C1917; border:1px solid var(--border-subtle); }
    .home-featured-secondary:hover { border-color:#1C1917; }
    .home-featured-deposit {
      margin-top:1.35rem;
      color:var(--text-muted);
      font-size:.76rem;
      letter-spacing:.02em;
    }
    @media (max-width: 820px) {
      .home-featured-product { grid-template-columns:1fr; gap:2rem; }
      .home-featured-image, .home-featured-image img { min-height:0; height:auto; aspect-ratio:1122/1402; }
      .home-featured-info { max-width:none; padding:0; }
      .home-featured-info h3 { font-size:2.7rem; }
    }
    @media (max-width: 560px) {
      .home-featured-image, .home-featured-image img { height:auto; aspect-ratio:1122/1402; }
      .home-featured-actions { flex-direction:column; align-items:stretch; }
      .home-featured-primary, .home-featured-secondary { width:100%; }
    }

/* ===== Store product grid (filled from WooCommerce, see oaRenderGrid in js/main.js) ===== */
#shopPage .oa-grid-wrap { padding: 10px 0 64px; }
#shopPage .oa-grid-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--border-subtle); padding-bottom: 1rem; margin-bottom: 2.2rem;
}
#shopPage .oa-grid-title { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; }
#shopPage .oa-grid-count { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
#shopPage .oa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 1.6rem; }
#shopPage .oa-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  background: none; padding: 0; text-align: left; color: var(--text-primary); cursor: pointer;
}
#shopPage .oa-card-img {
  position: relative; display: block; width: 100%; aspect-ratio: 1122 / 1402; overflow: hidden;
  background: var(--sand-cream); border-radius: 4px; margin-bottom: 0.65rem;
}
#shopPage .oa-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
#shopPage .oa-card:hover .oa-card-img img { transform: scale(1.03); }
#shopPage .oa-card-badge {
  position: absolute; top: 12px; left: 12px; background: #e6faff; color: #00a9c8;
  padding: 5px 10px; font-family: var(--font-heading); font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
}
#shopPage .oa-card-badge.sold-out { background: #1c1917; color: #fff; }
#shopPage .oa-card-name { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.1; }
#shopPage .oa-card-price { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); }
#shopPage .oa-back-link {
  grid-column: 1 / -1; justify-self: start; background: none; padding: 0; margin-bottom: -18px;
  font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary);
}
#shopPage .oa-back-link:hover { color: var(--ocean-deep); }

@media (max-width: 900px) {
  #shopPage .oa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
}
@media (max-width: 620px) {
  #shopPage .oa-grid-title { font-size: 2rem; }
  #shopPage .oa-card-name { font-size: 1.25rem; }
  #shopPage .oa-card-price { font-size: 0.85rem; }
  #shopPage .oa-back-link { margin-bottom: 0; }
}

/* ── Branded pop-up messages (oaNotice in js/main.js) ── */
.oa-notice-backdrop {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(28, 25, 23, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s ease;
}
.oa-notice-backdrop.open { opacity: 1; }
.oa-notice {
  position: relative; width: 100%; max-width: 420px; background: var(--bg-card); text-align: center;
  border-top: 4px solid var(--ocean-deep); border-radius: 6px; padding: 2.4rem 2rem 2rem;
  box-shadow: 0 24px 60px rgba(10, 37, 64, 0.25);
  transform: translateY(14px) scale(0.98); transition: var(--transition);
}
.oa-notice-backdrop.open .oa-notice { transform: none; }
.oa-notice--error { border-top-color: #E0654F; }
.oa-notice-icon {
  width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ocean-baby-blue); color: var(--ocean-deep);
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800;
}
.oa-notice--error .oa-notice-icon { background: #FDF0ED; color: #E0654F; }
.oa-notice-eyebrow {
  display: block; margin-bottom: 0.4rem; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocean-deep);
}
.oa-notice-title {
  margin: 0 0 0.75rem; font-family: var(--font-serif); font-size: 2rem; font-weight: 500; line-height: 1.1;
  color: var(--text-primary);
}
.oa-notice-text { margin: 0 0 1.6rem; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); }
.oa-notice-btn { width: 100%; justify-content: center; border: none; cursor: pointer; box-shadow: none; }
.oa-notice-btn:focus { outline: none; }
.oa-notice-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.35); }
@media (max-width: 480px) {
  .oa-notice { padding: 2rem 1.4rem 1.6rem; }
  .oa-notice-title { font-size: 1.7rem; }
}

/* ── VIP banner on the home page: same type and button as the top hero ── */
.vip-banner-heading { font-size: 3.8rem; margin-bottom: 1.1rem; text-shadow: 0 2px 18px rgba(10, 37, 64, 0.55), 0 1px 3px rgba(10, 37, 64, 0.4); }
.vip-banner-text {
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 400; line-height: 1.6; letter-spacing: 0.04em;
  color: #FFFFFF; margin-bottom: 2.2rem;
  text-shadow: 0 1px 3px rgba(10, 37, 64, 0.65), 0 2px 10px rgba(10, 37, 64, 0.45);
}
@media (max-width: 768px) {
  .vip-banner-heading { font-size: 2.6rem; }
  .vip-banner-text { font-size: 0.95rem; }
}

/* ── Site-wide type & buttons: match the home page hero ──
   Headings use Playfair Display (like "For Every Body. Every Season.") and every
   main button uses the hero's dusty-blue "Shop now" style. The logo keeps its own font. */
:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --btn-bg: #5A83A6;
  --btn-bg-hover: #4A7294;
}
.brand-logo { font-family: 'Cormorant Garamond', Georgia, serif; }

.btn-solstice,
.home-featured-primary,
.btn-add-bag,
#shopPage .oa-preorder-btn {
  background: var(--btn-bg); color: #FFFFFF; border: none; border-radius: 2px; box-shadow: none;
  font-family: var(--font-heading); font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em;
  transition: var(--transition); cursor: pointer;
}
.btn-solstice { padding: 1.15rem 2.6rem; font-size: 0.82rem; }
.btn-solstice:hover,
.home-featured-primary:hover,
.btn-add-bag:hover,
#shopPage .oa-preorder-btn:hover {
  background: var(--btn-bg-hover); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.btn-solstice:disabled,
#shopPage .oa-preorder-btn:disabled { transform: none; box-shadow: none; }
#shopPage .oa-size.selected { background: var(--btn-bg); border-color: var(--btn-bg); color: #FFFFFF; }

/* Feature strip: let long words like "SQUAT-PROOF" wrap instead of widening the page on phones. */
.pillar-item { min-width: 0; }
.pillar-title { overflow-wrap: anywhere; }
@media (max-width: 992px) { .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.section-heading { line-height: 1.1; }

/* ══════════════════════════════════════════════════════════════
   PHONE LAYOUT (max 620px wide). Desktop and tablet are untouched.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  /* Announcement bar: keep the shipping message on one line */
  .announcement-ribbon { font-size: 0.58rem; letter-spacing: 0.05em; }
  #announcementBarText { white-space: nowrap; }
  .support-btn { font-size: 0.64rem; letter-spacing: 0.08em; }

  /* Home: feature points as one slim row you can swipe sideways */
  .feature-pillar-bar { padding: 0.9rem 0; }
  .pillar-grid {
    display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -1rem; padding: 0 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pillar-grid::-webkit-scrollbar { display: none; }
  .pillar-item {
    flex: 0 0 auto; flex-direction: row; align-items: center; gap: 0.55rem;
    padding: 0.2rem 1.1rem; border-right: 1px solid var(--border-subtle); scroll-snap-align: start;
  }
  .pillar-item:first-child { padding-left: 0; }
  .pillar-icon svg { width: 18px; height: 18px; }
  .pillar-title { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; margin: 0; white-space: nowrap; overflow-wrap: normal; }
  .pillar-desc { display: none; }

  /* Home: "New Release" heading fits on one line next to "Visit store" */
  .section-heading { font-size: 1.9rem; letter-spacing: 0.03em; }
  .section-title-bar { margin-bottom: 1.8rem; align-items: center; gap: 1rem; }

  /* Our Story and Contact: less padding so text and form use the full width */
  #aboutPage > .container,
  #contactPage > .container { padding: 3rem 1rem 3.5rem !important; }
  #aboutPage > .container > div:first-child,
  #contactPage > .container > div:first-child { margin-bottom: 1.6rem !important; }
  #aboutPage > .container > div:nth-child(2),
  #contactPage > .container > div:nth-child(2) { padding: 1.6rem 1.25rem !important; }
  #aboutPage > .container > div:nth-child(2) { font-size: 1rem !important; line-height: 1.75 !important; }
  #contactPage h2 { font-size: 2.1rem !important; line-height: 1.15; margin-top: 0.4rem; }
  #contactPage form .btn-solstice { width: 100%; justify-content: center; letter-spacing: 0.18em; padding: 1.05rem 1rem; }

  /* Store: values strip items size to their text instead of a fixed height */
  #shopPage .oa-value { height: auto !important; padding: 14px 0; }

  /* Pop-up windows: a little less padding, buttons stay on one line */
  .modal-card { padding: 2.2rem 1.25rem 1.6rem !important; }
  .modal-card .btn-solstice { letter-spacing: 0.16em; padding-left: 1rem; padding-right: 1rem; }
  .modal-card h2 { line-height: 1.15 !important; }

  /* Size guide: all six columns fit the screen */
  #sizeGuideModal .modal-card > div[style*="overflow:hidden"] { overflow-x: auto !important; }
  #sizeGuideModal table { font-size: 0.74rem !important; }
  #sizeGuideModal th, #sizeGuideModal td { padding: 0.6rem 0.25rem !important; letter-spacing: 0 !important; }
  #sizeGuideModal th { font-size: 0.62rem !important; }
  #sizeGuideModal h2 { font-size: 1.5rem !important; margin-bottom: 1rem !important; }

  /* VIP banner: show the whole three-photo image across the top, text underneath */
  .vip-banner { display: block !important; padding: 0 !important; min-height: 0 !important; }
  .vip-banner .hero-bg-img { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
  .vip-banner .container { padding: 2.2rem 1.25rem 2.8rem !important; }
  .vip-banner { background: var(--bg-main) !important; }
  .vip-banner .vip-banner-heading { font-size: 2.2rem; text-shadow: none; color: var(--text-primary); }
  .vip-banner .vip-banner-text { text-shadow: none; color: var(--text-secondary); margin-bottom: 1.6rem; }

  /* Hero: a little shorter and re-centred so more of the photo shows (to undo, delete these 3 lines;
     the previous look is saved in "Theme benchmarks/…v1.7.1-BENCHMARK-phone-hero-before.zip") */
  .hero-solstice { min-height: 0; height: 560px; }
  .hero-solstice .hero-bg-img { object-position: 68% 35%; }
  .hero-solstice .hero-overlay-content { padding-top: 13rem; padding-bottom: 1.6rem; }

  /* Footer: section headings line up with their links */
  .site-footer h4 { text-align: left !important; }
}

/* Very small phones (e.g. iPhone SE, 320–380px) */
@media (max-width: 380px) {
  #announcementBarText { white-space: normal; }
  .brand-logo { font-size: 1.3rem; }
  .brand-tagline { font-size: 0.5rem; letter-spacing: 0.12em; }
  .nav-actions { gap: 0.1rem; }
  .icon-btn { padding: 0.35rem; }
  .hero-heading { font-size: 2.3rem; }
}

/* ===== PRODUCT GALLERY: photos keep their own shape, thumbnails in a row underneath ===== */
#shopPage .oa-gallery { flex-direction:column; gap:12px; max-width:520px; }
#shopPage .oa-main-photo {
  flex:none; width:100%; height:auto; max-height:none; aspect-ratio:auto;
  background:transparent; display:block;
}
#shopPage .oa-main-photo img { width:100%; height:auto; max-height:680px; object-fit:contain; }
#shopPage .oa-thumbs {
  display:flex; flex-direction:row; flex-wrap:wrap; gap:8px;
  width:100%; flex:none;
}
#shopPage .oa-thumb {
  width:auto; height:76px; aspect-ratio:auto; flex:none; border:0; border-radius:3px;
  background:transparent; opacity:.55; position:relative;
  transition:opacity .2s ease;
}
#shopPage .oa-thumb::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ocean-deep); transform:scaleX(0); transition:transform .2s ease;
}
#shopPage .oa-thumb:hover { opacity:.85; transform:none; border:0; }
#shopPage .oa-thumb.active { opacity:1; }
#shopPage .oa-thumb.active::after { transform:scaleX(1); }
#shopPage .oa-thumb img { width:auto; height:100%; object-fit:contain; }
@media (max-width:1180px) {
  #shopPage .oa-thumbs { width:100%; }
  #shopPage .oa-thumb { width:auto; }
}
@media (max-width:620px) {
  #shopPage .oa-gallery { max-width:none; }
  #shopPage .oa-thumbs {
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  #shopPage .oa-thumbs::-webkit-scrollbar { display:none; }
  #shopPage .oa-thumb { height:72px; width:auto; aspect-ratio:auto; scroll-snap-align:start; }
}