Custom CSS

The simplest way to customize visuals without forking the theme.

Where to add it

Theme settings → Custom CSS (text area). Whatever you paste is appended at the end of the global CSS, so it overrides theme rules without specificity tricks.

Avoid editing files in assets/. Custom CSS in settings survives theme updates; file edits don't.

Theme CSS variables

Reference these in your custom CSS to stay consistent:

/* Colors */
var(--dost-bg)         /* page background */
var(--dost-text)       /* primary text */
var(--dost-text-sec)   /* secondary text */
var(--dost-divider)    /* borders */
var(--dost-gold)       /* accent */

/* Spacing */
var(--sp-1)  /* 8px */
var(--sp-2)  /* 16px */
var(--sp-3)  /* 24px */
var(--sp-4)  /* 32px */
var(--sp-5)  /* 48px */

/* Container */
var(--container-max)
var(--page-gutter)
var(--header-height)
var(--header-group-height)

/* Motion */
var(--ease)
var(--motion-duration)
var(--motion-ease)

Common overrides

/* Tighter section padding everywhere */
.shopify-section { --pad-top: 48px; --pad-bottom: 48px; }

/* Wider lookbook on desktop */
@media (min-width: 1200px) {
  .lookbook__frame { padding: 0 var(--sp-5); }
}

/* Custom focus outline */
:focus-visible { outline: 2px solid var(--dost-gold); outline-offset: 2px; }

Tips

• Use :where() to keep your specificity flat — :where(.section-name) {} has zero specificity, easy to override later.
• Test changes in preview mode before publishing.
• Keep custom CSS under ~200 lines. If it's longer, commission a proper theme code change.