/* Snuscorp base reset + typography. Values per build/design-spec.md §1.2–1.5. */

/* ---------- fonts ---------- */
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/josefinsans-400.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/opensans-400.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/opensans-500.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/opensans-600.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/opensans-400i.woff2) format("woff2");}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:600;font-display:swap;
  src:url(../fonts/opensans-600i.woff2) format("woff2");}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg-body);color:var(--color-body);
  font-family:var(--font-body-family);font-weight:400;font-size:17px;line-height:1.6;
  letter-spacing:var(--font-body-letter-spacing);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body.snuscorp-no-scroll{overflow:hidden;}
img,svg,video{max-width:100%;height:auto;display:block;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
figure{margin:0;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
table{border-collapse:collapse;width:100%;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link:focus{position:fixed;top:10px;left:10px;z-index:9999;background:#fff;color:#151515;
  padding:10px 20px;clip:auto;width:auto;height:auto;}

/* ---------- headings ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.heading-font,.h1-xlarge,.h1-large,
.logolink.text-logo,.product-title{
  font-family:var(--font-heading-family);font-weight:400;
  letter-spacing:var(--font-heading-letter-spacing);
  color:var(--color-heading);margin:0 0 .4em;}

h1,.h1{font-size:52px;line-height:68.6px;}
.h2{font-size:36.4px;line-height:51.48px;}
h2,.h3{font-size:33.8px;line-height:42.9px;}
h4,.h4{font-size:28.6px;line-height:1.2;}
h5,.h5{font-size:31.2px;line-height:1.2;}
h6,.h6{font-size:26px;line-height:1.2;}

@media only screen and (min-width:768px){
  h1,.h1{font-size:62.4px;}
  .h2{font-size:46.8px;}
  h2,.h3{font-size:39px;}
}
@media only screen and (min-width:1068px){
  h1,.h1{font-size:67.6px;line-height:85.8px;}
  .h2{font-size:52px;line-height:68.64px;}
  h2,.h3{font-size:44.2px;line-height:60.06px;letter-spacing:1.768px;}
}

.body-font{font-family:var(--font-body-family);}
.rte > *:last-child{margin-bottom:0;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.uppercase{text-transform:uppercase;}

/* ---------- grid ---------- */
.row{max-width:var(--container-width);margin-left:auto;margin-right:auto;
  display:flex;flex-wrap:wrap;padding:0;width:100%;}
.row.expanded{max-width:none;}
.row.collapse{padding:0;}
.columns{padding:0 var(--column-padding);width:100%;min-width:0;}
@media only screen and (min-width:768px){
  .row{padding:0 var(--row-padding-desktop);}
  .columns{padding:0 var(--column-padding-desktop);}
}
.full-width-row{max-width:none;}

.section-spacing{margin:var(--section-spacing-mobile) 0;}
@media only screen and (min-width:768px){
  .section-spacing{margin:var(--section-spacing-desktop) 0;}
}
.spacer{position:relative;height:var(--spacer-mobile);}
@media only screen and (min-width:768px){.spacer{height:var(--spacer-desktop);}}

/* ---------- section headers ---------- */
.section-header{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;margin-bottom:30px;}
.section-header--center{flex-direction:column;align-items:center;text-align:center;}
.section-header--center .rte{margin-top:5px;}
.section-header--left{justify-content:space-between;}
.section-header__title{margin:0;}
.section-header__aside{margin-left:auto;}

/* ---------- buttons ---------- */
.button,
input[type=submit],
button.button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;
  min-height:var(--button-height);padding:7px 30px;
  font-family:var(--font-body-family);font-size:var(--button-font-size);font-weight:600;
  line-height:1.2;letter-spacing:var(--button-letter-spacing);text-transform:uppercase;
  border:1px solid var(--color-accent);border-radius:var(--button-border-radius);
  background:var(--color-accent);color:#fff;cursor:pointer;text-align:center;
  transition:color var(--button-transition),background-color var(--button-transition);}
.button::before{content:"";position:absolute;z-index:-1;top:0;left:0;width:125%;height:100%;
  background:var(--bg-body);
  transform:rotate3d(0,0,1,6deg) translate3d(-1.2em,110%,0);
  transform-origin:0 100%;
  transition:transform var(--button-transition);}
.button:hover::before,.button:focus-visible::before{transform:rotate3d(0,0,1,0deg) translateZ(0);}
.button:hover,.button:focus-visible{color:var(--color-accent);}
.button.outline{background:transparent;color:var(--color-accent);border-color:var(--color-accent);}
.button.outline::before{background:var(--color-accent);}
.button.outline:hover,.button.outline:focus-visible{color:#fff;}
.button.white{background:#fff;border-color:#fff;color:var(--color-accent);}
.button.white::before{background:var(--color-accent);}
.button.white:hover,.button.white:focus-visible{color:#fff;}
.button.small{min-height:32px;}
.button.medium{min-height:40px;}
.button.full{width:100%;}
.button.pill{border-radius:500px;}

.text-button{position:relative;display:inline-block;font-family:var(--font-body-family);
  font-size:15px;font-weight:400;letter-spacing:.3px;line-height:1.2;
  padding-bottom:2px;color:inherit;}
.text-button::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:left center;
  transition:transform .25s cubic-bezier(.104,.204,.492,1);}
.text-button:hover::after,.text-button:focus-visible::after{transform:scaleX(0);transform-origin:right center;}
.text-button.white{color:#fff;}
.text-button.uppercase{text-transform:uppercase;}

/* ---------- form controls ---------- */
input[type=text],input[type=search],input[type=email],input[type=tel],
input[type=number],input[type=password],textarea,select{
  width:100%;height:48px;padding:12px 17px;border:1px solid var(--color-form-border);
  border-radius:0;background:#fff;color:var(--color-body);
  font-family:var(--font-body-family);font-size:15px;line-height:1.4;}
textarea{height:auto;}
select{appearance:none;-webkit-appearance:none;padding-right:34px;}
.select{position:relative;display:inline-block;}
.select select{padding-right:24px;}
.select__chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  pointer-events:none;width:10px;height:6px;}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;justify-content:center;
  height:23px;padding:0 10px;border-radius:var(--badge-corner-radius);
  background:var(--color-badge-sale);color:var(--color-badge-text);
  font-family:var(--font-body-family);font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;line-height:1;}
.badge.out-of-stock{background:var(--color-badge-sold-out);}
.badge.non-returnable{background:var(--color-badge-sold-out);border-radius:0;}

/* ---------- misc ---------- */
.aspect-ratio{position:relative;display:block;width:100%;height:0;padding-bottom:100%;overflow:hidden;}
.aspect-ratio > img,.aspect-ratio > picture > img{position:absolute;inset:0;width:100%;height:100%;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.site-main{min-height:40vh;}
.page-content{padding:50px 0;}