@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
:root{
  /* ---- Base neutrals: near-black product photography stage ---- */
  --ink-900:#0a0a0b;
  --ink-800:#0e0e0f;
  --ink-700:#101114;
  --ink-600:#17181b;
  --ink-500:#1f2126;
  --ink-400:#2a2d33;
  --ink-300:#3a3e46;
  --ink-200:#5b616c;
  --ink-100:#8b919c;

  --paper-000:#ffffff;
  --paper-050:#fafafa;
  --paper-100:#f4f4f5;
  --paper-200:#e9eaec;
  --paper-300:#d7d9dd;
  --paper-400:#b8bcc3;

  /* ---- Brand orange (sampled from the DIGIDRAW brochure) ---- */
  --orange-700:#b52c07;
  --orange-600:#cc3609;
  --orange-500:#ff4e1d; /* primary brand orange */
  --orange-400:#ff7048;
  --orange-200:#ffc4b0;
  --orange-100:#ffe6dd;
  --orange-050:#fff1ec;

  /* ---- Supporting photographic blues (screen glow, chip macro, night skyline) ---- */
  --blue-900:#0b1424;
  --blue-800:#142e53;
  --blue-600:#2a4a7f;
  --blue-400:#546ea4;
  --blue-200:#7087a8;

  /* ---- Semantic status ---- */
  --green-500:#1f9d55;
  --green-050:#e8f6ee;
  --amber-500:#c98a04;
  --amber-050:#fdf5e2;
  --red-500:#d92d20;
  --red-050:#fdecea;
  --info-500:#2e6be6;
  --info-050:#e9f0fe;

  /* ---- Semantic aliases: light (default storefront) ---- */
  --text-strong:var(--ink-800);
  --text-body:var(--ink-500);
  --text-muted:var(--ink-200);
  --text-inverse:var(--paper-000);
  --text-brand:var(--orange-600);
  --text-link:var(--orange-600);
  --text-link-hover:var(--orange-700);

  --surface-page:var(--paper-000);
  --surface-subtle:var(--paper-100);
  --surface-card:var(--paper-000);
  --surface-inset:var(--paper-050);
  --surface-stage:var(--ink-800);      /* full-bleed product stage */
  --surface-brand:var(--orange-500);
  --surface-brand-soft:var(--orange-050);

  --border-subtle:var(--paper-200);
  --border-default:var(--paper-300);
  --border-strong:var(--ink-300);
  --border-brand:var(--orange-500);

  --focus-ring:var(--orange-500);

  /* Price / commerce */
  --price-regular:var(--ink-800);
  --price-sale:var(--orange-600);
  --price-compare:var(--ink-100);
}

/* Dark stage sections (hero bands, product theatre, footer) */
.dd-dark,[data-theme="dark"]{
  --text-strong:var(--paper-000);
  --text-body:#c7cad0;
  --text-muted:var(--ink-100);
  --text-inverse:var(--ink-800);
  --text-link:var(--orange-400);
  --text-link-hover:var(--orange-200);
  --surface-page:var(--ink-800);
  --surface-subtle:var(--ink-700);
  --surface-card:var(--ink-600);
  --surface-inset:var(--ink-700);
  --border-subtle:var(--ink-400);
  --border-default:var(--ink-300);
  --border-strong:var(--ink-200);
  --price-regular:var(--paper-000);
  --price-sale:var(--orange-400);
  --price-compare:var(--ink-100);
}

:root{
  --font-display:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sans:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:500;
  --fw-bold:700;
  --fw-black:700;

  /* Scale — storefront desktop values */
  --fs-display-1:64px;
  --fs-display-2:48px;
  --fs-h1:40px;
  --fs-h2:32px;
  --fs-h3:24px;
  --fs-h4:20px;
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:13px;
  --fs-micro:11px;

  --lh-tight:1.06;
  --lh-snug:1.2;
  --lh-normal:1.45;
  --lh-relaxed:1.65;

  --ls-display:0;
  --ls-heading:0;
  --ls-body:0;
  --ls-eyebrow:0.14em;   /* uppercase eyebrows / spec labels */
  --ls-button:0.02em;

  /* Semantic type roles */
  --type-display:var(--fw-black) var(--fs-display-1)/var(--lh-tight) var(--font-display);
  --type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display);
  --type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display);
  --type-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display);
  --type-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-display);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
  --type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-normal) var(--font-sans);
  --type-button:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-sans);
  --type-eyebrow:var(--fw-semibold) var(--fs-micro)/1.2 var(--font-sans);
  --type-spec:var(--fw-light) var(--fs-body-sm)/var(--lh-normal) var(--font-sans);
  --type-price:var(--fw-bold) var(--fs-h4)/1.1 var(--font-display);
}

:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Semantic rhythm */
  --gap-inline:var(--space-2);      /* icon ↔ label */
  --gap-stack:var(--space-4);       /* paragraph rhythm */
  --gap-grid:var(--space-6);        /* product grid gutter */
  --pad-card:var(--space-5);
  --pad-section-y:var(--space-24);  /* marketing band */
  --pad-band-y:var(--space-16);     /* commerce band */
}

:root{
  --radius-0:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:20px;
  --radius-pill:999px;

  --radius-control:var(--radius-sm);   /* buttons, inputs — hardware-precise, barely rounded */
  --radius-card:var(--radius-md);
  --radius-media:var(--radius-lg);     /* product photography tiles */
  --radius-chip:var(--radius-pill);
  --border-hairline:1px;
  --border-emphasis:2px;
}

:root{
  /* Shadows are restrained: product photography carries depth, chrome stays flat. */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(14,14,15,.06);
  --shadow-card:0 2px 8px rgba(14,14,15,.06);
  --shadow-card-hover:0 8px 24px rgba(14,14,15,.10);
  --shadow-menu:0 12px 32px rgba(14,14,15,.14);
  --shadow-modal:0 24px 64px rgba(14,14,15,.28);
  --shadow-inset-field:inset 0 1px 0 rgba(14,14,15,.04);
  --glow-brand:0 6px 20px rgba(255,78,29,.28);

  /* Protection gradients over full-bleed photography */
  --scrim-bottom:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.78) 100%);
  --scrim-top:linear-gradient(180deg,rgba(10,10,11,.72) 0%,rgba(10,10,11,0) 100%);
  --scrim-left:linear-gradient(90deg,rgba(10,10,11,.82) 0%,rgba(10,10,11,0) 62%);
  --glass-dark:rgba(14,14,15,.62);
  --glass-light:rgba(255,255,255,.72);
  --blur-chrome:blur(14px);
}

:root{
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-instant:80ms;
  --dur-fast:160ms;
  --dur-base:240ms;
  --dur-slow:420ms;
  --dur-reveal:640ms;

  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
  --transition-card:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
  --transition-media:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-standard);
  --press-scale:.985;
}

:root{
  --container-max:1440px;
  --container-content:1240px;
  --container-text:720px;
  --gutter-page:40px;
  --gutter-page-sm:20px;
  --header-height:64px;
  --header-height-utility:36px;
  --grid-columns:12;
  --product-grid-min:264px;
  --z-base:0;
  --z-sticky:100;
  --z-header:200;
  --z-drawer:300;
  --z-modal:400;
  --z-toast:500;
}

/* Minimal element defaults. Components style themselves via tokens. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-strong);letter-spacing:var(--ls-heading)}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}h4{font:var(--type-h4)}
p{margin:0 0 var(--gap-stack)}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.dd-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.dd-spec{font:var(--type-spec);color:var(--text-body)}
.dd-container{max-width:var(--container-content);margin:0 auto;padding:0 var(--gutter-page)}


/* ---- Theme chrome ---- */
.dd-header{position:sticky;top:0;z-index:var(--z-header);background:var(--ink-800);color:#fff}
.dd-utility{height:var(--header-height-utility);display:flex;align-items:center;justify-content:center;background:var(--orange-500);color:#fff;font:var(--type-body-sm);font-weight:var(--fw-medium)}
.dd-masthead{height:var(--header-height);display:flex;align-items:center;gap:var(--space-10);max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-page)}
.dd-masthead .logo img{height:26px;display:block}
.dd-nav{display:flex;align-items:center;gap:var(--space-8);flex:1;list-style:none;margin:0;padding:0}
.dd-nav a{font:var(--type-body-sm);font-weight:var(--fw-medium);color:rgba(255,255,255,.72);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.dd-nav a:hover{color:#fff;text-decoration:none}
.dd-nav .current-menu-item a{color:#fff;border-bottom-color:var(--orange-500)}
.dd-header-icons{display:flex;align-items:center;gap:var(--space-1)}
.dd-header-icons a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff;position:relative}
.dd-cart-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-pill);background:var(--orange-500);color:#fff;font:var(--type-eyebrow);display:flex;align-items:center;justify-content:center}
.dd-footer{background:var(--ink-900);color:rgba(255,255,255,.72);padding:var(--space-16) 0 var(--space-8)}
.dd-footer a{color:rgba(255,255,255,.72)}.dd-footer a:hover{color:#fff}
.dd-footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-12);max-width:var(--container-content);margin:0 auto;padding:0 var(--gutter-page)}
.dd-footer h4{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:#fff;margin:0 0 var(--space-4)}
.dd-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
/* ---- Buttons (Woo + theme) ---- */
.button,button.single_add_to_cart_button,.dd-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-inline);height:44px;padding:0 22px;font:var(--type-button);letter-spacing:var(--ls-button);border-radius:var(--radius-control);border:1px solid var(--orange-500);background:var(--orange-500);color:#fff;cursor:pointer;transition:var(--transition-control);text-decoration:none}
.button:hover,button.single_add_to_cart_button:hover{background:var(--orange-600);border-color:var(--orange-600);color:#fff;text-decoration:none}
.dd-btn--secondary{background:transparent;border-color:var(--border-strong);color:var(--text-strong)}
/* ---- Product grid & cards ---- */
ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(var(--product-grid-min),1fr));gap:var(--gap-grid);list-style:none;margin:0;padding:0}
ul.products li.product{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;transition:var(--transition-card)}
ul.products li.product:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
ul.products li.product img{aspect-ratio:1/1;object-fit:contain;background:#fff;width:100%}
ul.products li.product .woocommerce-loop-product__title{font:var(--type-h4);color:var(--text-strong);padding:var(--space-4) var(--pad-card) 0}
ul.products li.product .price{font:var(--type-price);color:var(--price-regular);padding:var(--space-2) var(--pad-card) var(--pad-card)}
ul.products li.product .price ins{color:var(--price-sale);text-decoration:none}
ul.products li.product .price del{color:var(--price-compare);font:var(--type-body-sm)}
/* ---- Single product ---- */
.dd-container{max-width:var(--container-content);margin:0 auto;padding:0 var(--gutter-page)}
div.product div.summary .product_title{font:var(--type-h1);color:var(--text-strong)}
div.product .woocommerce-product-gallery img{border-radius:var(--radius-media);border:1px solid var(--border-subtle);background:#fff}
.dd-spec-table{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-12);margin:0}
.dd-spec-table>div{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle)}
.dd-spec-table dt{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.dd-spec-table dd{margin:0;font:var(--type-spec);color:var(--text-strong);text-align:right}
.dd-box-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.dd-box-list li{display:flex;gap:var(--space-3);font:var(--type-body);color:var(--text-body)}
.dd-box-list li::before{content:"✓";color:var(--orange-500);font-weight:700}
.dd-upsell{margin-top:var(--space-8);padding:var(--space-6);background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-card);display:flex;align-items:center;gap:var(--space-6)}
.dd-software{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.dd-software figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:96px}
.dd-software img{width:56px;height:56px;object-fit:contain}
.dd-software figcaption{font:var(--type-body-sm);color:var(--text-muted);text-align:center}
/* ---- Hero slider ---- */
.dd-hero{position:relative;background:var(--ink-800);color:#fff;overflow:hidden}
.dd-hero .swiper-slide{position:relative;min-height:560px;display:flex;align-items:center}
.dd-hero .media,.dd-hero video,.dd-hero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dd-hero .scrim{position:absolute;inset:0;background:var(--scrim-left)}
.dd-hero .copy{position:relative;max-width:var(--container-content);margin:0 auto;padding:0 var(--gutter-page);width:100%}
.dd-hero .copy .inner{max-width:560px}
.dd-hero h1{font:var(--type-display);font-size:var(--fs-display-2);color:#fff;letter-spacing:var(--ls-display);margin:var(--space-5) 0 0}
.dd-hero .spec{font:var(--type-spec);color:rgba(255,255,255,.82);margin-top:var(--space-4)}
/* ---- Sections ---- */
.dd-band{padding:var(--pad-band-y) 0}
.dd-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--orange-500)}
@media (max-width:900px){.dd-footer .cols{grid-template-columns:1fr 1fr}.dd-masthead{gap:var(--space-4)}.dd-spec-table{grid-template-columns:1fr}}
