/*
Theme Name: Dreamation Designs
Theme URI: https://dreamationdesigns.com
Author: Dreamation Designs
Description: Custom theme for Dreamation Designs — handmade 3D-printed toys, fidgets, and art. Built on the site's own "Shop" style design system, with full WooCommerce support.
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: dreamation-designs
*/

/* Admin bar offset so the WP toolbar doesn't overlap the fixed sidebar/promo bar */
html.wp-toolbar{ }
body.admin-bar .sidebar{ top: 32px; height: calc(100vh - 32px); }
@media screen and (max-width: 782px){
  body.admin-bar .sidebar{ top: auto; }
}
body.admin-bar .promo{ margin-top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar .promo{ margin-top: 46px; }
}

/* ============ TOKENS ============ */
  :root{
    color-scheme: light only;

    /* Neutrals (kept from the reference system) */
    --canvas:#98dff0;
    --white:#ffffff;
    --ink:#000000;
    --border:#ebebeb;
    --muted:#787574;
    --stone:#cccccc;
    --fog:#acb0aa;
    --slate:#332f2d;
    --ash:#665a54;

    /* Single saturated accent — sampled straight from the Dreamation Designs logo */
    --accent:#f0891f;
    --accent-rgb:240,137,31;
    --accent-deep:#a3580b; /* darker shade for accent-colored icons/text on light surfaces */
    --accent-wash:#fce4cc;
    --star:#e8a33d;

    --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --font-heading:'Fredoka',var(--font);

    --r-card:28px;
    --r-inner:20px;
    --r-pill:9999px;
    --r-label:12px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow-card: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --shadow-lg: 0 4px 24px rgba(0,0,0,.12);
    --shadow-accent: 0 4px 24px rgba(var(--accent-rgb),.34);

    --max-w:1200px;
    --sidebar-w:64px;
  }

  /* ============ RESET / BASE ============ */
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font-family:var(--font);
    font-size:14px;
    line-height:1.33;
    letter-spacing:-0.014em;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;font-size:inherit;cursor:pointer;background:none;border:none;color:inherit;}
  ul{margin:0;padding:0;list-style:none;}
  h1,h2,h3,p,form{margin:0;}
  h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); letter-spacing:normal; }
  input{font-family:inherit;}
  ::selection{background:var(--accent-wash);color:var(--ink);}

  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
  }

  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px;}

  /* ============ PLACEHOLDER PHOTO BLOCKS ============
     Swap any ".ph" block for a real <img class="[same sizing context]" src="your-photo.jpg" alt="..."> */
  .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);width:100%;height:100%;}
  .ph svg{width:26px;height:26px;color:var(--stone);}
  .ph span{font-size:10px;letter-spacing:-0.02em;}
  .ph-a{background:#e4f2f7;}
  .ph-b{background:#fbead8;}
  .ph-c{background:#ecefef;}
  .ph-d{background:var(--accent-wash);}
  .ph-e{background:#e8f0f2;}

  /* ============ ICON DEFAULTS ============ */
  svg{display:block;}

  /* ============ PROMO BAR ============ */
  .promo{
    background:var(--ink); color:var(--white); min-height:48px;
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:8px 44px; position:relative; text-align:center;
    font-size:12px; letter-spacing:-0.017em;
  }
  .promo-icon{width:22px;height:22px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;}
  .promo-icon svg{width:12px;height:12px;color:var(--ink);}
  .promo-text b{font-weight:600;}
  .promo-sub{color:var(--stone);margin-left:4px;display:none;}
  .promo-arrow{width:13px;height:13px;flex:none;color:var(--stone);}
  .promo-close{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--stone);}
  .promo-close svg{width:13px;height:13px;}
  .promo-close:hover{color:#fff;}
  @media (min-width:640px){ .promo-sub{display:inline;} }

  /* ============ LAYOUT SHELL (mobile-first: bottom tab bar) ============ */
  .layout{display:flex;flex-direction:column;}

  .sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; height:64px;
    background:var(--white); border-top:1px solid var(--border);
    display:flex; flex-direction:row; align-items:center; justify-content:space-between;
    padding:0 10px; z-index:50;
  }
  .sidebar-logo{display:none;}
  .sidebar-nav{display:flex; flex-direction:row; gap:2px;}
  .nav-item{width:46px;height:46px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative;flex:none;}
  .nav-item svg{width:22px;height:22px;stroke-width:2.5 !important;}
  .nav-item.current{background:var(--canvas);}
  .nav-item .badge{position:absolute;top:4px;right:4px;min-width:15px;height:15px;padding:0 3px;border-radius:9999px;background:var(--accent);color:var(--ink);font-size:9px;line-height:15px;text-align:center;font-weight:700;}

  .sidebar-bottom{margin-top:0;}
  .avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--fog);display:flex;align-items:center;justify-content:center;color:#fff;}
  .avatar svg{width:15px;height:15px;}

  main{padding-bottom:78px;}
  footer{padding-bottom:0;}

  .wrap{max-width:var(--max-w);margin:0 auto;padding:0 20px;}

  @media (min-width:769px){
    .layout{flex-direction:row;align-items:flex-start;}
    .sidebar{
      position:sticky; top:0; left:auto; right:auto; bottom:auto; width:var(--sidebar-w); height:100vh;
      flex-direction:column; align-items:center; justify-content:flex-start; padding:20px 0 16px;
      border-top:none; overflow-y:auto;
    }
    .sidebar-logo{display:flex;width:32px;height:32px;border-radius:10px;background:var(--canvas);align-items:center;justify-content:center;color:var(--ink);font-size:15px;font-weight:700;margin-bottom:20px;flex:none;}
    .sidebar-nav{flex-direction:column;gap:6px;margin-top:16px;}
    .sidebar-bottom{margin-top:auto;padding-top:16px;}
    main{padding-bottom:0; flex:1; min-width:0;}
  }

  /* ============ HERO ============ */
  .hero{padding:36px 20px 8px;position:relative;}
  .hero-visual{display:flex; gap:10px; justify-content:center; align-items:flex-start; margin:0 auto 20px; max-width:960px;}
  .floating-card{
    position:static; background:var(--white); border-radius:var(--r-card);
    box-shadow:var(--shadow-card); overflow:hidden; width:120px; flex:none;
    opacity:0; animation:floatIn .6s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .fc-1{animation-delay:.05s;}
  .fc-2{animation-delay:.15s;}
  .floating-card .ph-box{aspect-ratio:1/1; border-radius:var(--r-inner); margin:8px 8px 0; overflow:hidden;}
  .floating-card .fc-body{padding:9px 10px 11px;}
  .floating-card .fc-name{font-size:12px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .floating-card .fc-rating{display:flex;align-items:center;gap:3px;margin-top:4px;color:var(--muted);font-size:9px;letter-spacing:-0.02em;}
  .floating-card .fc-rating svg{width:9px;height:9px;color:var(--star);flex:none;}

  @keyframes floatIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

  .hero-word{text-align:center;position:relative;z-index:2;}
  .hero-word .mark{line-height:1;}
  .hero-word .logo-img{height:52px;width:auto;margin:0 auto;}
  .hero-word .tagline{margin-top:16px;font-size:14px;color:var(--slate);letter-spacing:-0.014em;max-width:420px;margin-left:auto;margin-right:auto;}

  .search-wrap{max-width:560px;margin:20px auto 0;}
  .search-pill{
    display:flex;align-items:center; background:var(--white); border-radius:var(--r-pill);
    border:1px solid rgba(0,0,0,.1); padding:4px 4px 4px 18px; box-shadow:var(--shadow-sm);
  }
  .search-pill input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:16px;letter-spacing:-0.031em;color:var(--ink);padding:8px 0;}
  .search-pill input::placeholder{color:var(--muted);}
  .search-submit{
    width:44px;height:44px;border-radius:50%;background:var(--accent);flex:none;
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-accent);color:var(--ink);
  }
  .search-submit svg{width:17px;height:17px;}

  /* ============ WOOCOMMERCE: PRODUCT SEARCH FORM ============
     get_product_search_form() outputs its own markup/classes
     (.woocommerce-product-search, .search-field, a plain button) —
     restyled here to match .search-pill/.search-submit above rather
     than duplicating those rules under a second class name. */
  .woocommerce-product-search{
    display:flex; align-items:center; background:var(--white); border-radius:var(--r-pill);
    border:1px solid rgba(0,0,0,.1); padding:4px 4px 4px 18px; box-shadow:var(--shadow-sm);
  }
  .woocommerce-product-search .search-field{
    flex:1; min-width:0; border:none; outline:none; background:transparent;
    font-size:16px; letter-spacing:-0.031em; color:var(--ink); padding:8px 0; font-family:inherit;
  }
  .woocommerce-product-search .search-field::placeholder{ color:var(--muted); }
  .woocommerce-product-search button[type="submit"]{
    width:44px; height:44px; border-radius:50%; background:var(--accent); flex:none;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-accent);
    font-size:0; color:transparent; position:relative;
  }
  .woocommerce-product-search button[type="submit"]::before{
    content:"\2192"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:18px; line-height:1; color:var(--ink); font-family:Arial,sans-serif;
  }

  @media (min-width:640px){
    .floating-card{width:150px;}
    .hero-word .logo-img{height:64px;}
    .hero-word .tagline{font-size:16px;max-width:480px;}
  }

  @media (min-width:1025px){
    .hero{padding:52px 24px 8px;}
    .hero-visual{position:relative; height:250px; display:block; margin-bottom:0;}
    .floating-card{position:absolute; width:172px;}
    .fc-1{top:0; left:calc(50% - 380px); transform:rotate(-6deg); animation-name:floatInR1;}
    .fc-2{top:30px; left:calc(50% + 190px); width:152px; transform:rotate(5deg); animation-name:floatInR2;}
    .hero-word .logo-img{height:78px;}
    @keyframes floatInR1{ from{opacity:0; transform:translateY(14px) rotate(-6deg);} to{opacity:1; transform:translateY(0) rotate(-6deg);} }
    @keyframes floatInR2{ from{opacity:0; transform:translateY(14px) rotate(5deg);} to{opacity:1; transform:translateY(0) rotate(5deg);} }
  }

  /* ============ CATEGORY PILLS ============ */
  .cat-row{display:flex; gap:8px; overflow-x:auto; padding:0 20px 40px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .cat-row::-webkit-scrollbar{display:none;}
  .cat-pill{
    display:flex;align-items:center;gap:8px; background:var(--white); border:1px solid var(--border);
    border-radius:var(--r-pill); padding:6px 16px 6px 6px; box-shadow:var(--shadow-sm); font-size:13px; letter-spacing:-0.01em;
    flex:none; white-space:nowrap;
  }
  .cat-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
  .cat-dot-img{overflow:hidden;background:var(--white);}
  .cat-dot-img img{width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important;display:block;}
  .cat-dot svg{width:12px;height:12px;}

  @media (min-width:768px){
    .cat-row{flex-wrap:wrap; overflow-x:visible; justify-content:center; padding:0 24px 56px; max-width:var(--max-w); margin:0 auto;}
    .cat-pill{flex:initial; font-size:14px;}
  }

  /* ============ SECTION SHELLS ============ */
  .section{padding:0 20px 48px; max-width:var(--max-w); margin:0 auto;}
  .section-head{display:flex;align-items:center;gap:5px;margin-bottom:20px;width:max-content;}
  .section-head:hover h2{color:var(--accent-deep);}
  .section-head:hover svg{color:var(--accent-deep);}
  .section-head h2{font-size:18px;font-weight:600;}
  .section-head svg{width:15px;height:15px;color:var(--ink);}

  @media (min-width:768px){
    .section{padding:0 24px 64px;}
    .section-head{margin-bottom:24px;}
    .section-head h2{font-size:20px;}
  }

  /* ============ PRODUCT IMAGE TILE ============ */
  .tile-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  .tile{position:relative; overflow:hidden; aspect-ratio:1/1; border-radius:0;}
  .tile-label{
    position:absolute; left:8px; bottom:8px; background:rgba(255,255,255,.9); backdrop-filter:blur(2px);
    border-radius:var(--r-label); padding:8px 12px; max-width:calc(100% - 44px);
  }
  .tile-label .name{font-size:13px;font-weight:600;letter-spacing:-0.01em;}
  .tile-label .price{font-size:11px;color:var(--muted);margin-top:1px;}
  .tile-add{
    position:absolute; top:8px; right:8px; width:30px;height:30px;border-radius:50%;background:var(--white);
    box-shadow:var(--shadow-sm); display:flex;align-items:center;justify-content:center; transition:background-color .25s, color .25s, transform .15s;
  }
  .tile-add svg{width:14px;height:14px;}
  .tile-add:active{transform:scale(.92);}
  .tile-add.added{background:var(--accent);color:var(--ink);}

  @media (min-width:900px){
    .tile-grid{grid-template-columns:repeat(4,1fr); gap:12px;}
    .tile-label .name{font-size:14px;}
    .tile-label .price{font-size:12px;}
  }

  /* ============ SPOTLIGHT CARD + RAIL ============ */
  .rail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;}
  .rail-head .section-head{margin-bottom:0;}
  .rail{display:flex;gap:14px;overflow-x:auto; scroll-behavior:smooth; padding-bottom:4px; scrollbar-width:none; margin:0 -20px; padding-left:20px; padding-right:20px;}
  .rail::-webkit-scrollbar{display:none;}
  .spot-card{
    flex:none; width:168px; background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden;
  }
  .spot-card .ph-box{aspect-ratio:1/1; border-radius:var(--r-inner); margin:8px 8px 0; overflow:hidden;}
  .spot-card .sc-body{padding:11px 13px 13px;}
  .spot-card .sc-name{font-size:13px;font-weight:600;letter-spacing:-0.01em;}
  .spot-card .sc-meta{display:flex;align-items:center;gap:5px;margin-top:5px;color:var(--muted);font-size:10px;letter-spacing:-0.02em;}
  .spot-card .sc-meta svg{width:9px;height:9px;color:var(--star);flex:none;}
  .spot-card .sc-row{display:flex;align-items:center;justify-content:space-between;margin-top:9px;}
  .spot-card .sc-price{font-size:13px;font-weight:600;}
  .sc-add{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:none; transition:background-color .25s, transform .15s;}
  .sc-add svg{width:13px;height:13px;}
  .sc-add:active{transform:scale(.92);}
  .sc-add.added{background:var(--accent);color:var(--ink);}

  .rail-arrows{display:flex;gap:8px;flex:none;}
  .rail-arrow{
    width:32px;height:32px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-lg);
    display:flex;align-items:center;justify-content:center;flex:none; transition:opacity .2s;
  }
  .rail-arrow svg{width:14px;height:14px;}
  .rail-arrow:disabled{opacity:.35;box-shadow:var(--shadow-sm);cursor:default;}

  @media (min-width:640px){ .spot-card{width:190px;} }

  /* ============ HERO-AND-GRID (2-col) COMPOSITION ============ */
  .split{display:grid; grid-template-columns:1fr; gap:14px;}
  .split-hero{position:relative;border-radius:var(--r-card);overflow:hidden; min-height:280px;}
  .split-hero .ph-box{width:100%;height:100%;position:absolute;inset:0;}
  .split-hero-overlay{position:absolute;left:20px;top:20px;color:#fff;z-index:2;}
  .split-hero-overlay .n{font-size:20px;font-weight:600;letter-spacing:-0.02em;}
  .split-hero-overlay .m{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;}
  .split-hero-overlay .m svg{width:11px;height:11px;color:#f4c862;}
  .split-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,0) 50%); z-index:1;}
  .split-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

  @media (min-width:900px){
    .split{grid-template-columns:3fr 2fr; gap:16px;}
    .split-hero{min-height:0;}
    .split-hero-overlay .n{font-size:26px;}
  }

  /* ============ CTA BAND ============ */
  .cta{
    display:flex; flex-direction:column; align-items:flex-start; gap:20px;
    background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card);
    padding:28px;
  }
  .cta h3{font-size:19px;font-weight:600;max-width:420px;}
  .cta p{margin-top:8px;color:var(--muted);font-size:13px;max-width:420px;}
  .btn-accent{
    background:var(--accent); color:var(--ink); border-radius:var(--r-pill); padding:13px 22px; font-size:13px;font-weight:600;
    letter-spacing:-0.01em; box-shadow:var(--shadow-accent); display:inline-flex;align-items:center;gap:8px; flex:none;
    transition:transform .15s;
  }
  .btn-accent:active{transform:scale(.97);}
  .btn-accent svg{width:14px;height:14px;}

  @media (min-width:768px){
    .cta{flex-direction:row;align-items:center;justify-content:space-between;padding:40px;gap:24px;flex-wrap:wrap;}
    .cta h3{font-size:22px;}
    .cta p{font-size:14px;}
    .btn-accent{padding:14px 26px;font-size:14px;}
  }

  /* ============ FOOTER ============ */
  footer{background:var(--ink);color:var(--stone);margin-top:8px;}
  .footer-in{max-width:var(--max-w);margin:0 auto;padding:44px 20px 24px;}
  .footer-top{display:grid; grid-template-columns:1fr; gap:28px;}
  .footer-brand .logo-img{height:34px;width:auto;}
  .footer-brand p{margin-top:14px;font-size:13px;line-height:1.5;max-width:280px;color:var(--stone);}
  .footer-social{display:flex;gap:8px;margin-top:16px;}
  .footer-social a{width:32px;height:32px;border-radius:50%;border:1px solid #333;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
  .footer-social svg{width:14px;height:14px;}
  .footer-col h3{color:#fff;font-size:13px;font-weight:600;margin-bottom:14px;}
  .footer-col ul li{margin-bottom:10px;}
  .footer-col a{font-size:13px;color:var(--stone);}
  .footer-col a:hover{color:#fff;}
  .footer-news h3{color:#fff;font-size:13px;font-weight:600;margin-bottom:10px;}
  .footer-news p{font-size:12px;color:var(--stone);margin-bottom:10px;}
  .footer-news form{display:flex;background:#1a1a1a;border-radius:var(--r-pill);padding:4px;}
  .footer-news input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:13px;padding:8px 12px;}
  .footer-news input::placeholder{color:#7a7a7a;}
  .footer-news button{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .15s;}
  .footer-news button:active{transform:scale(.92);}
  .footer-news button svg{width:13px;height:13px;}
  .footer-news .thanks{font-size:12px;color:#fff;padding:8px 4px;}
  .footer-safety-note{margin-top:28px;padding-top:16px;border-top:1px solid #262626;}
  .footer-safety-note p{font-size:11px;color:#8a8a8a;line-height:1.6;margin:0;}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding-top:18px;border-top:1px solid #262626;font-size:11px;flex-wrap:wrap;gap:8px;color:#8a8a8a;}

  @media (min-width:560px){ .footer-top{grid-template-columns:1fr 1fr;} }
  @media (min-width:900px){
    .footer-in{padding:56px 24px 32px;}
    .footer-top{grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:32px;}
  }

  /* ============ COOKIE BAR ============ */
  .cookie-bar{
    position:fixed; left:12px; right:12px; bottom:80px; max-width:none; background:var(--white); border:1px solid var(--border);
    border-radius:20px; box-shadow:var(--shadow-lg); padding:16px 18px; z-index:60; display:flex; flex-direction:column; gap:12px;
  }
  .cookie-bar p{font-size:12px;line-height:1.5;color:var(--muted);}
  .cookie-bar a{text-decoration:underline;color:var(--ink);}
  .cookie-actions{display:flex;gap:8px;}
  .btn-pill-ghost, .btn-pill-dark{
    border-radius:var(--r-pill); padding:7px 16px; font-size:12px; font-weight:600; box-shadow:var(--shadow-sm);
  }
  .btn-pill-dark{background:var(--ink);color:#fff;}
  .btn-pill-ghost{background:var(--white);border:1px solid var(--border);color:var(--ink);}

  @media (min-width:769px){
    .cookie-bar{left:24px;right:auto;bottom:24px;max-width:340px;}
  }

  /* ============ CATEGORY / LISTING PAGES ============ */
  .breadcrumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--slate);padding:16px 20px 0;max-width:var(--max-w);margin:0 auto;}
  .breadcrumb a{text-decoration:underline;text-underline-offset:2px;}
  .breadcrumb a:hover{color:var(--ink);}
  .breadcrumb .sep{color:var(--muted);}
  .breadcrumb .current{color:var(--muted);}

  .cat-header{padding:18px 20px 28px;max-width:var(--max-w);margin:0 auto;}
  .cat-header-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
  .cat-header-icon{width:48px;height:48px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow-card);}
  .cat-header-icon svg{width:24px;height:24px;}
  .cat-header h1{font-size:26px;font-weight:600;}
  .cat-header p{margin-top:10px;font-size:14px;color:var(--slate);max-width:600px;line-height:1.5;}

  .cat-note{
    display:flex; align-items:flex-start; gap:10px; max-width:var(--max-w); margin:0 auto 24px;
    padding:12px 20px; background:var(--accent-wash); border-radius:14px;
  }
  .cat-note svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--accent-deep);}
  .cat-note p{margin:0;font-size:13px;line-height:1.5;color:var(--ink);}

  @media (min-width:768px){
    .breadcrumb{padding:20px 24px 0;}
    .cat-header{padding:22px 24px 32px;}
    .cat-header-icon{width:56px;height:56px;border-radius:20px;}
    .cat-header-icon svg{width:28px;height:28px;}
    .cat-header h1{font-size:34px;}
    .cat-header p{font-size:15px;}
  }

  .sort-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
  .product-count{font-size:13px;color:var(--slate);}
  .sort-select-wrap{position:relative;display:inline-flex;}
  .sort-select{
    appearance:none;-webkit-appearance:none;background:var(--white);border:1px solid var(--border);
    border-radius:var(--r-pill);padding:9px 36px 9px 16px;font-size:13px;font-weight:500;color:var(--ink);
    box-shadow:var(--shadow-sm);cursor:pointer;font-family:inherit;
  }
  .sort-select-wrap::after{
    content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;
    border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
    transform:translateY(-70%) rotate(45deg);pointer-events:none;
  }

  .empty-note{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:32px;text-align:center;color:var(--muted);font-size:14px;}

  /* ============ CUSTOM ORDER PAGE ============ */
  .steps-row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:40px;}
  .step-card{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:22px;}
  .step-num{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;margin-bottom:14px;}
  .step-card h3{font-size:15px;font-weight:600;}
  .step-card p{margin-top:7px;font-size:13px;color:var(--muted);line-height:1.5;}

  @media (min-width:768px){ .steps-row{grid-template-columns:repeat(3,1fr);gap:16px;} }

  .order-wrap{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;}
  .order-form{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:24px;display:flex;flex-direction:column;gap:16px;}
  .order-form h3{font-size:18px;font-weight:600;margin-bottom:2px;}
  .form-row{display:grid;grid-template-columns:1fr;gap:14px;}
  .form-field{display:flex;flex-direction:column;gap:6px;}
  .form-field label{font-size:12px;font-weight:600;letter-spacing:-0.01em;}
  .form-field input,.form-field textarea,.form-field select{
    border:1px solid var(--border);border-radius:14px;padding:11px 14px;font-size:14px;
    font-family:inherit;background:#f7f9fa;color:var(--ink);width:100%;
  }
  .form-field textarea{resize:vertical;min-height:110px;}
  .form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:2px solid var(--accent);outline-offset:1px;}
  .form-submit{
    background:var(--accent);color:var(--ink);border-radius:var(--r-pill);padding:13px 24px;font-size:14px;font-weight:600;
    box-shadow:var(--shadow-accent);display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;
  }
  .form-thanks{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:40px 28px;text-align:center;}
  .form-thanks h3{font-size:19px;font-weight:600;}
  .form-thanks p{margin-top:8px;color:var(--muted);font-size:14px;}

  .inspo-col{display:flex;flex-direction:column;gap:12px;}
  .inspo-col .tile{border-radius:var(--r-inner);}

  @media (min-width:900px){ .order-wrap{grid-template-columns:3fr 2fr;gap:20px;} }

  /* ============ WOOCOMMERCE: LOOP ADD-TO-CART BUTTON ============
     WooCommerce's default loop button is a text link ("Add to cart").
     Restyled here into the same small circular plus-button from the
     static build, reusing .tile-add's position/shadow and adding a
     text-based icon so no image asset is needed. */
  .tile-add-wrap{ position:absolute; top:8px; right:8px; z-index:2; }

  /* ============ WISHLIST: TILE HEART BUTTON ============ */
  .tile-wish-wrap{ position:absolute; top:8px; left:8px; z-index:2; }
  .wish-toggle{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; background:var(--white);
    box-shadow:var(--shadow-sm); transition:background-color .25s, transform .15s;
  }
  .wish-toggle svg{ width:15px; height:15px; color:var(--ink); }
  .wish-toggle:active{ transform:scale(.92); }
  .wish-toggle.wish-on{ background:var(--accent); }
  .wish-toggle.wish-on svg{ fill:var(--ink); }

  /* ============ WISHLIST: SIDEBAR ICON ============ */
  #wishlistBtn.wish-on svg{ fill:var(--accent-deep); stroke:var(--accent-deep); }

  /* ============ WISHLIST: FULL-WIDTH BUTTON (single product page) ============ */
  .wish-toggle-full{
    display:inline-flex; align-items:center; gap:8px; margin-top:14px;
    background:var(--white); border:1px solid var(--border); border-radius:999px;
    padding:11px 20px; font-size:13px; font-weight:600; box-shadow:var(--shadow-sm);
    transition:background-color .2s;
  }
  .wish-toggle-full svg{ width:16px; height:16px; color:var(--ink); }
  .wish-toggle-full.wish-on{ background:var(--accent-wash); }
  .wish-toggle-full.wish-on svg{ fill:var(--accent-deep); stroke:var(--accent-deep); }
  .wish-toggle-full.wish-on .wish-toggle-full-label::after{ content:" (saved)"; }
  .tile-add-wrap .add_to_cart_button,
  .tile-add-wrap .ajax_add_to_cart{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; background:var(--white) !important;
    box-shadow:var(--shadow-sm); font-size:0 !important; line-height:0; color:transparent !important;
    position:relative; transition:background-color .25s, transform .15s;
  }
  .tile-add-wrap .add_to_cart_button::before{
    content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:16px; line-height:1; color:var(--ink); font-family:Arial,sans-serif;
  }
  .tile-add-wrap .add_to_cart_button:active{ transform:scale(.92); }
  .tile-add-wrap .add_to_cart_button.loading{ opacity:.6; }
  .tile-add-wrap .add_to_cart_button.added{ background:var(--accent) !important; }
  .tile-add-wrap .add_to_cart_button.added::before{ content:"\2713"; color:var(--ink); }
  /* Products needing an option chosen (variable products) link to the
     product page instead of adding directly — same visual treatment. */
  .tile-add-wrap a.product_type_variable::before{ content:"\2192"; font-size:13px; }

  /* ============ WOOCOMMERCE: PRODUCT IMAGES IN TILES/CARDS ============
     Real product photos vary in aspect ratio — cover-fit them into
     our fixed placeholder shapes instead of stretching/squashing. */
  .tile img, .spot-card img, .ph-box img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }

  /* ============ WOOCOMMERCE: STAR RATING ============ */
  .star-rating{ color: var(--star); font-size: 13px; overflow: hidden; position: relative; height: 1em; line-height: 1; width: 5.4em; }
  .star-rating::before{ content: "\2605\2605\2605\2605\2605"; color: var(--border); float: left; top: 0; left: 0; position: absolute; }
  .star-rating span{ overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
  .star-rating span::before{ content: "\2605\2605\2605\2605\2605"; color: var(--star); position: absolute; top: 0; left: 0; }

  /* ============ WOOCOMMERCE: BREADCRUMB ============
     Reuses our .breadcrumb look; wc's own wrapper class gets it too. */
  .woocommerce-breadcrumb{
    display:flex; align-items:center; gap:7px; font-size:12px; color:var(--slate);
    padding:16px 20px 0; max-width:var(--max-w); margin:0 auto;
  }
  .woocommerce-breadcrumb a{ color: var(--slate); text-decoration:underline; text-underline-offset:2px; }
  .woocommerce-breadcrumb a:hover{ color:var(--ink); }
  @media (min-width:768px){ .woocommerce-breadcrumb{ padding:20px 24px 0; } }

  /* ============ WOOCOMMERCE: PAGINATION ============ */
  .dd-pagination{ display:flex; justify-content:center; gap:8px; padding:24px 20px 8px; flex-wrap:wrap; }
  .dd-pagination .page-numbers{
    min-width:36px; height:36px; padding:0 12px; border-radius:999px; background:var(--white);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
    box-shadow:var(--shadow-sm);
  }
  .dd-pagination .page-numbers.current{ background:var(--ink); color:#fff; }
  .dd-pagination .page-numbers.dots{ box-shadow:none; background:none; }

  /* ============ SINGLE PRODUCT PAGE ============ */
  .single-product-wrap{ max-width:var(--max-w); margin:0 auto; padding:24px 20px 64px; }
  .single-product-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
  .single-product-gallery{ border-radius:var(--r-card); box-shadow:var(--shadow-card); background:var(--white); padding:12px; }
  .single-product-gallery .woocommerce-product-gallery__image{ aspect-ratio:1/1; overflow:hidden; border-radius:calc(var(--r-card) - 8px); }
  .single-product-gallery .woocommerce-product-gallery__image img{ width:100%; height:100%; object-fit:cover; }
  .single-product-gallery .flex-control-thumbs{ display:flex; gap:8px; margin:10px 0 0; padding:0; list-style:none; flex-wrap:wrap; }
  .single-product-gallery .flex-control-thumbs li{ width:60px; height:60px; flex:none; }
  .single-product-gallery .flex-control-thumbs img{ width:100%; height:100%; object-fit:cover; border-radius:10px; cursor:pointer; opacity:.6; }
  .single-product-gallery .flex-control-thumbs img.flex-active{ opacity:1; outline:2px solid var(--accent); outline-offset:1px; }
  .single-product-info .cat-links{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .single-product-info .cat-links a{
    font-size:11px; font-weight:600; background:var(--white); border:1px solid var(--border);
    border-radius:999px; padding:4px 12px; box-shadow:var(--shadow-sm);
  }
  .single-product-info h1{ font-size:24px; font-weight:600; }
  .single-product-info .price{ font-size:22px; font-weight:600; margin-top:10px; display:block; }
  .single-product-info .price del{ color:var(--muted); font-weight:400; font-size:16px; margin-right:8px; }
  .single-product-info .price ins{ text-decoration:none; color:var(--accent-deep); }
  .single-product-info .woocommerce-product-details__short-description{ margin-top:16px; font-size:14px; color:var(--slate); line-height:1.6; }
  .single-product-info form.cart{ display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; }
  .single-product-info .quantity{ display:flex; }
  .single-product-info .quantity input{
    width:64px; height:48px; border-radius:999px; border:1px solid var(--border); text-align:center;
    font-size:14px; font-family:inherit; background:var(--white);
  }
  .single-product-info button.single_add_to_cart_button{
    background:var(--accent); color:var(--ink); border-radius:999px; padding:0 28px; height:48px;
    font-size:14px; font-weight:600; box-shadow:var(--shadow-accent);
  }
  .single-product-info .stock{ margin-top:12px; font-size:12px; color:var(--muted); }
  .single-product-info .woocommerce-product-rating{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:var(--muted); }

  /* ============ SINGLE PRODUCT: DESCRIPTION/REVIEWS TABS ============
     WooCommerce's own default output (woocommerce_after_single_product_summary)
     — never previously styled, so it was falling back entirely to WooCommerce's
     generic defaults instead of matching the rest of the site. */
  .woocommerce-tabs{
    max-width:var(--max-w); margin:32px auto 0; background:var(--white);
    border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:24px 20px;
  }
  .woocommerce-tabs ul.tabs{ display:flex; gap:8px; list-style:none; padding:0; margin:0 0 20px; flex-wrap:wrap; }
  .woocommerce-tabs ul.tabs li{ margin:0; }
  .woocommerce-tabs ul.tabs li a{
    display:block; background:#f7f9fa; border-radius:999px; padding:8px 18px;
    font-size:13px; font-weight:600; color:var(--slate);
  }
  .woocommerce-tabs ul.tabs li.active a{ background:var(--ink); color:#fff; }
  .woocommerce-tabs .panel h2{ font-size:18px; font-weight:600; margin-bottom:12px; }
  .woocommerce-tabs .panel{
    font-size:15px; line-height:1.75; color:var(--slate);
    border-left:3px solid var(--accent); padding-left:16px;
  }
  .woocommerce-Tabs-panel--description > p:first-of-type::first-letter{
    font-family:var(--font-heading); font-size:2.7em; font-weight:600;
    color:var(--accent-deep); float:left; line-height:0.78; padding:4px 8px 0 0;
  }
  .woocommerce-tabs .panel p{ margin:0 0 12px; }
  .woocommerce-Reviews .comment-form input,
  .woocommerce-Reviews .comment-form textarea{
    border:1px solid var(--border); border-radius:14px; padding:10px 14px; font-family:inherit; font-size:14px; width:100%;
  }
  .woocommerce-Reviews .comment-form textarea{ min-height:100px; }
  .woocommerce-Reviews .form-submit input{
    background:var(--accent); color:var(--ink); border-radius:999px; padding:10px 24px;
    font-weight:600; font-size:13px; margin-top:10px;
  }

  /* ============ SINGLE PRODUCT: RELATED PRODUCTS ============
     Corrected selector — WooCommerce actually outputs .related.products,
     not .related-products, so this was never matching anything before. */
  .related.products{ max-width:var(--max-w); margin:40px auto 0; padding:0 20px 56px; }
  .related.products > h2{ font-size:20px; font-weight:600; margin-bottom:16px; }
  .related.products ul.products{
    display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:16px !important;
    list-style:none !important; padding:0 !important; margin:0 !important;
  }
  .related.products ul.products li.product{
    float:none !important; width:auto !important; margin:0 !important; clear:none !important;
  }
  .related.products ul.products::before,
  .related.products ul.products::after{
    display:none !important; content:none !important; /* WooCommerce's own clearfix markers — harmless as float clearfix, but grid treats them as real (invisible) items */
  }
  @media (min-width:768px){ .related.products ul.products{ grid-template-columns:repeat(4,1fr) !important; gap:20px !important; } }

  @media (min-width:900px){
    .single-product-wrap{ padding:32px 24px 80px; }
    .single-product-grid{ grid-template-columns:1fr 1fr; gap:40px; }
    .single-product-info h1{ font-size:30px; }
  }

  /* ============ WOOCOMMERCE BLOCKS: CART & CHECKOUT ============
     Cart/Checkout are rendered as Gutenberg blocks, not classic
     templates — styled here via their block class names instead
     of PHP template overrides. */
  .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{
    max-width: var(--max-w); margin: 0 auto; padding: 24px 20px 64px;
  }
  .wc-block-components-product-name{ color: var(--ink); font-weight: 600; }
  .wc-block-cart-item__product-image img, .wc-block-components-product-image img{ border-radius: var(--r-inner); }
  .wc-block-components-quantity-selector{ border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
  .wc-block-components-totals-item__value, .wc-block-components-formatted-money-amount{ font-weight: 600; }

  .wc-block-components-button, .wc-block-cart__submit-button, .wp-element-button,
  .wc-block-checkout__actions_row .wc-block-components-button{
    background: var(--accent) !important; color: var(--ink) !important; border-radius: 999px !important;
    font-weight: 600 !important; box-shadow: var(--shadow-accent);
  }
  .wc-block-components-button:hover{ background: var(--accent-deep) !important; color: #fff !important; }

  /* Both checkout's two columns and cart's two columns get the
     "card" treatment at the outer level only. The inner panels
     (order summary, totals, coupon box) sit inside those cards —
     giving them the *same* white/radius/shadow treatment was
     creating a card-inside-a-card look with a visible seam where
     the two rounded corners didn't quite line up.
     padding and overflow are !important because WooCommerce sets
     its own values on these same elements with enough specificity
     to otherwise win. */
  .wc-block-checkout__main, .wc-block-checkout__sidebar,
  .wc-block-cart__main, .wc-block-cart__sidebar{
    background: var(--white) !important; border-radius: var(--r-card) !important; box-shadow: var(--shadow-card) !important;
    border: none !important; margin-bottom: 20px; padding: 20px !important;
  }
  @media (min-width:768px){
    .wc-block-checkout__main, .wc-block-checkout__sidebar,
    .wc-block-cart__main, .wc-block-cart__sidebar{ padding: 28px !important; }
  }
  /* overflow:hidden only where it's actually needed — clipping the
     cart product table's square corners to the card's rounded ones.
     It was previously applied to all four containers above, which
     was clipping the Express Checkout heading on the checkout page
     for reasons still not fully confirmed (see reply). Scoping it to
     just where the original problem was removes that side effect
     regardless of what WooCommerce is actually doing with that
     heading's position. */
  .wc-block-cart__main{ overflow: hidden !important; }

  /* The actual product-rows element is a <table>, not a div — a
     border-radius on a table doesn't reliably clip its own cells,
     which was the real cause of the pinched-corner look. Let it sit
     plain and full-width inside the .wc-block-cart__main card above
     instead of trying to be its own rounded box. */
  .wc-block-cart-items{
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    width: 100%; border-collapse: collapse;
  }
  /* Inner panels: no competing card, just breathing room + a hairline
     divider so sections within a card still read as distinct. */
  .wc-block-components-panel, .wc-block-components-order-summary,
  .wc-block-components-totals-wrapper{
    background: transparent; box-shadow: none; border-top: 1px solid var(--border);
  }
  .wc-block-checkout__sidebar > *:first-child,
  .wc-block-cart__sidebar > *:first-child{ border-top: none; }

  /* Belt-and-suspenders version of the rule above: whatever the *actual*
     inner wrapper is actually called (couldn't confirm the exact class
     from devtools), strip any competing card look from every direct
     child of the sidebar so only the outer sidebar itself is ever the
     white/rounded/shadowed box. */
  .wc-block-checkout__sidebar > *,
  .wc-block-cart__sidebar > *{
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  }

  .wc-block-components-radio-control__option, .wc-block-components-payment-method-label{
    border-radius: 14px !important;
  }

  /* ============ GENERIC PAGE CONTENT (About, Custom Orders, etc.) ============ */
  .page-content{ font-size:14px; line-height:1.7; color:var(--slate); }
  .page-content h2{ font-size:20px; font-weight:600; color:var(--ink); margin:28px 0 10px; }
  .page-content h3{ font-size:17px; font-weight:600; color:var(--ink); margin:22px 0 8px; }
  .page-content p{ margin:0 0 14px; }
  .page-content a{ text-decoration:underline; text-underline-offset:2px; color:var(--ink); }
  .page-content ul, .page-content ol{ margin:0 0 14px; padding-left:20px; }
  .page-content img{ border-radius:var(--r-inner); max-width:100%; height:auto; }

  /* ============ MY ACCOUNT PAGE ============ */
  .woocommerce-account .woocommerce-MyAccount-navigation ul{ display:flex; flex-wrap:wrap; gap:8px; padding:0 20px; max-width:var(--max-w); margin:16px auto; list-style:none; }
  .woocommerce-account .woocommerce-MyAccount-navigation a{
    display:block; background:var(--white); border-radius:999px; padding:8px 18px; font-size:13px; font-weight:600; box-shadow:var(--shadow-sm);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation .is-active a{ background:var(--ink); color:#fff; }
  .woocommerce-account .woocommerce-MyAccount-content{ max-width:var(--max-w); margin:0 auto; padding:16px 20px 64px; }