@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/wp-content/themes/topwatch-custom/assets/design/0b60bbe04e9c479444b3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/wp-content/themes/topwatch-custom/assets/design/1404ca348bd75ef836f4.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}











































































:root {
  --font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-core: var(--font-sans);
  --font-display: var(--font-sans);
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}


:root {
  
  --ink-1000: #000000;        
  --ink-900: #262626;         
  --ink-700: #323d50;         
  --ink-500: #5b6472;         
  --ink-400: #8a9099;         

  
  --white: #ffffff;           
  --neutral-50: #fafafa;      
  --neutral-100: #f5f5f5;     
  --neutral-200: #ebebeb;     
  --neutral-300: #e0e0e0;     
  --neutral-400: #d3d3d3;     
  --scrim: #22222200;         
  --scrim-strong: #22222299;  

  
  --teal-700: #145f76;        
  --teal-800: #0f4a5c;        
  --teal-100: #e6eff2;        

  
  --green-600: #40a944;       
  --green-700: #348a37;       
  --green-100: #ecf7ec;       

  
  --alert-600: #a8332b;
  --alert-100: #f7eceb;

  
  --surface-canvas: var(--white);
  --surface-sunken: var(--neutral-100);
  --surface-card: var(--white);
  --surface-card-hover: var(--neutral-50);
  --surface-field: var(--white);
  --surface-field-disabled: var(--neutral-100);
  --surface-info: var(--teal-100);
  --surface-promo: var(--green-100);
  --surface-alert: var(--alert-100);
  --surface-overlay: var(--scrim-strong);

  --text-heading: var(--ink-1000);
  --text-body: var(--ink-700);
  --text-strong: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-placeholder: var(--ink-400);
  --text-link: var(--teal-700);
  --text-link-hover: var(--teal-800);
  --text-price: var(--green-600);
  --text-on-dark: var(--white);
  --text-alert: var(--alert-600);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-focus: var(--teal-700);

  --action-primary: var(--ink-900);
  --action-primary-hover: var(--ink-1000);
  --action-primary-text: var(--white);
  --action-secondary-border: var(--ink-900);
  --action-secondary-text: var(--ink-900);
  --action-buy: var(--green-600);
  --action-buy-hover: var(--green-700);
  --action-disabled: var(--neutral-300);
  --action-disabled-text: var(--ink-400);
}


:root {
  
  --fs-hero: 49px;      --lh-hero: 50px;      
  --fs-h1: 24px;        --lh-h1: 30px;        
  --fs-h2: 22px;        --lh-h2: 34.5px;      
  --fs-h3: 19px;        --lh-h3: 28px;        
  --fs-lead: 17px;      --lh-lead: 27px;      
  --fs-nav: 17px;       --lh-nav: 42px;       
  --fs-body: 15px;      --lh-body: 22.4px;    
  --fs-body-tight: 15px; --lh-body-tight: 16px; 
  --fs-body-loose: 15px; --lh-body-loose: 35px; 
  --fs-small: 13px;     --lh-small: 21px;     

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  
  --tracking-normal: normal;
  --tracking-caps: 0.04em;

  
  --type-hero: var(--fw-regular) var(--fs-hero) / var(--lh-hero) var(--font-sans);
  --type-title: var(--fw-semibold) var(--fs-h1) / var(--lh-h1) var(--font-sans);
  --type-title-long: var(--fw-regular) var(--fs-h2) / var(--lh-h2) var(--font-sans);
  --type-subtitle: var(--fw-semibold) var(--fs-h3) / var(--lh-h3) var(--font-sans);
  --type-lead: var(--fw-bold) var(--fs-lead) / var(--lh-lead) var(--font-sans);
  --type-nav: var(--fw-bold) var(--fs-nav) / var(--lh-nav) var(--font-sans);
  --type-body: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-sans);
  --type-label: var(--fw-medium) var(--fs-body-tight) / var(--lh-body-tight) var(--font-sans);
  --type-list-link: var(--fw-bold) var(--fs-body-loose) / var(--lh-body-loose) var(--font-sans);
  --type-meta: var(--fw-regular) var(--fs-small) / var(--lh-small) var(--font-sans);
  --type-meta-strong: var(--fw-bold) var(--fs-small) / var(--lh-small) var(--font-sans);
}


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

  
  --container-max: 1200px;      
  --container-gutter: 16px;     
  --grid-gap: 12px;             
  --card-pad: 12px;             
  --card-pad-lg: 16px;
  --section-gap: 32px;          
  --row-gap: 8px;               
  --tap-min: 44px;              
  --control-h-sm: 30px;
  --control-h: 38px;
  --control-h-lg: 44px;
  --header-h: 42px;             
}


:root {
  --radius-sm: 3px;   
  --radius-md: 4px;   
  --radius-round: 50%;
  --border-w: 1px;
  --border-w-thick: 2px;
}


:root {
  --elevation-0: none;                                  
  --elevation-1: rgba(0, 0, 0, 0.5) 0px 2px 4px 0px;    
  --elevation-2: rgba(0, 0, 0, 0.34) 0px 1px 3px 0px;   
  --elevation-3: rgb(211, 211, 211) 1px 1px 13px 0px;   

  --shadow-menu: var(--elevation-1);
  --shadow-popover: var(--elevation-2);
  --shadow-card-hover: var(--elevation-3);
  --focus-ring: 0 0 0 2px rgba(20, 95, 118, 0.35);      
}


:root {
  --dur-fast: 120ms;   
  --dur-base: 180ms;   
  --dur-slow: 300ms;   
  --ease-standard: ease;              
  --ease-out: cubic-bezier(0.2, 0, 0.2, 1);
  --transition-control: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}


html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-canvas); color: var(--text-body); font: var(--type-body); text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; color: var(--text-heading); }
h1 { font: var(--type-title); }
h2 { font: var(--type-subtitle); }
h3 { font: var(--type-lead); }
p { margin: 0 0 var(--space-5); }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:where(:hover) { color: var(--text-link-hover); text-decoration: underline; } /* Same weight as `a`, so component colours set by class keep priority on hover. */
a:where(:active) { color: var(--text-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--border-focus); }
img { display: block; max-width: 100%; }
small { font: var(--type-meta); color: var(--text-muted); }
hr { border: 0; border-top: var(--border-w) solid var(--border-subtle); margin: var(--space-6) 0; }
::placeholder { color: var(--text-placeholder); }
.tw-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter); }
.tw-caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); }