/* =========================================================================
   Angels Stamp Makers design system
   Premium stationery-catalogue identity: warm ivory paper, ink-black
   type, deep burgundy as the primary mark. An elegant serif carries
   the personality on headings (the printed/catalogue feel); a clean
   sans handles UI and body copy. The stamp motif (impression-style
   badges, a subtle paper grain) is used sparingly as the one signature
   device, not layered on every element. Built on Bootstrap 5 (CDN, see
   layouts) via its CSS custom properties.
   ========================================================================= */

:root {
    --ink:           #242321;   /* ink black - body text */
    --ink-soft:       #5C574E;  /* secondary text on paper */
    --paper:          #F5F0E6;  /* warm ivory - page background */
    --paper-deep:     #EBE1CC;  /* deeper ivory - topbar / footer */
    --card:           #FBF8F1;  /* lightest paper - card surfaces */
    --surface:        #FFFFFF;  /* pure white - product photo wells */
    --stamp-red:      #9E2925;  /* primary accent - deep burgundy/stamp red */
    --stamp-red-dark: #721C1A;
    --stamp-blue:     #405D72;  /* secondary accent - faded stamp blue */
    --stamp-blue-dark:#2E4453;
    --paper-brown:    #B9A78E;  /* muted brown - supporting/borders */
    --star-gold:      #C89B3C;  /* star ratings only - keeps the familiar convention without competing with the two accents */
    --line:           #D9CCB0;  /* hairline borders against paper */
    --line-soft:      #E5DAC2;

    --bs-primary: var(--stamp-red);
    --bs-primary-rgb: 158, 41, 37;
    --bs-link-color: var(--stamp-red);
    --bs-link-hover-color: var(--stamp-red-dark);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-border-radius: .35rem;
    --bs-border-radius-lg: .5rem;
    --bs-border-radius-sm: .25rem;
}

/* Subtle paper grain, sitewide - two overlapping radial-dot layers at
   different scales, low opacity. No image asset, just gradients. */
body {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--paper);
    background-image:
        radial-gradient(rgba(36, 35, 33, .04) 1px, transparent 1px),
        radial-gradient(rgba(36, 35, 33, .03) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 2px 3px;
    color: var(--ink);
}


h1, h2, .font-display {
    font-family: 'Fraunces', 'Source Sans 3', Georgia, serif;
    letter-spacing: -0.01em;
    font-weight: 600;
}

h3, h4, h5, h6 {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Prices, order numbers, SKUs - a distinct "ledger" mono treatment used
   consistently site-wide so numbers always feel exact and authoritative. */
.price, .font-mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    font-weight: 600;
    letter-spacing: -0.02em;
}

a { text-decoration: none; }

/* The site's one signature type treatment: text that reads as if it
   were pressed onto the page with real ink - a faint rotated ghost
   directly behind the main glyphs (double-strike), used only on the
   handful of headlines that should feel like the brand's own mark. */
.stamped {
    display: inline-block;
    position: relative;
    color: var(--stamp-red);
    transform: rotate(-1.1deg);
}
.stamped::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--stamp-red);
    opacity: .35;
    transform: translate(1.5px, 1px) rotate(.6deg);
    z-index: -1;
    filter: blur(.3px);
}

/* ---------------------------------------------------------------------
   Buttons - a primary CTA should feel like it presses down like a
   stamp when clicked, not just darken.
   --------------------------------------------------------------------- */
.btn {
    border-radius: .35rem;
    font-weight: 600;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, border-color .15s ease;
}

.btn-primary {
    background: var(--stamp-red);
    border-color: var(--stamp-red);
    box-shadow: 0 3px 0 var(--stamp-red-dark);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--stamp-red-dark);
    border-color: var(--stamp-red-dark);
}
.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--stamp-red-dark);
}

.btn-gold {
    background: var(--stamp-blue);
    border-color: var(--stamp-blue);
    color: #fff;
    box-shadow: 0 3px 0 var(--stamp-blue-dark);
}
.btn-gold:hover {
    background: var(--stamp-blue-dark);
    border-color: var(--stamp-blue-dark);
    color: #fff;
}
.btn-gold:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--stamp-blue-dark);
}

.btn-outline-primary {
    color: var(--stamp-red);
    border-color: var(--stamp-red);
}
.btn-outline-primary:hover {
    background: var(--stamp-red);
    border-color: var(--stamp-red);
}

/* Little arrow nudge on primary CTAs, used sparingly (add-to-cart, submit). */
.btn-cta .btn-arrow { display: inline-block; transition: transform .15s ease; margin-left: .35rem; }
.btn-cta:hover .btn-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------- */
.sw-topbar {
    background: var(--ink);
    color: #E7E0CC;
    font-size: .82rem;
}
.sw-topbar a { color: #D8CDA8; }
.sw-topbar a:hover { color: #fff; }

.sw-navbar {
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

.sw-brand {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--ink) !important;
    letter-spacing: -0.01em;
}
.sw-brand .spark { color: var(--stamp-red); }

.sw-category-strip {
    background: var(--ink);
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sw-category-strip::-webkit-scrollbar { display: none; }
.sw-category-strip a {
    color: #D8CDA8;
    font-size: .85rem;
    padding: .55rem .9rem;
    display: inline-block;
    border-bottom: 2px solid transparent;
}
.sw-category-strip a:hover, .sw-category-strip a.active {
    color: #fff;
    border-bottom-color: var(--stamp-red);
}

/* ---------------------------------------------------------------------
   Hero - kraft paper backdrop with a large circular "stamp impression"
   as the focal image (see home/index.blade.php for the inline SVG).
   --------------------------------------------------------------------- */
.sw-hero {
    position: relative;
    background: var(--paper-deep);
    background-image:
        radial-gradient(rgba(33, 32, 27, .05) 1px, transparent 1px),
        radial-gradient(rgba(33, 32, 27, .04) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 2px 3px;
    color: var(--ink);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.sw-hero .sw-hero-content { position: relative; z-index: 2; }
.sw-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); line-height: 1.15; }
.sw-hero .lead { color: var(--ink-soft); }

.sw-hero-stamp {
    animation: sw-stamp-in .5s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes sw-stamp-in {
    from { opacity: 0; transform: scale(1.4) rotate(-14deg); }
    to   { opacity: 1; transform: scale(1) rotate(-8deg); }
}

.sw-safety-strip {
    background: #F3E8CE;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
    color: var(--ink-soft);
}
.sw-safety-strip a { color: var(--stamp-red); }

/* ---------------------------------------------------------------------
   Product cards
   --------------------------------------------------------------------- */
.sw-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
    position: relative;
}
.sw-card:hover {
    box-shadow: 0 10px 22px rgba(33, 32, 27, .12);
    transform: translateY(-2px);
}

.sw-card .sw-thumb {
    background: linear-gradient(160deg, var(--surface) 0%, #F0E8D4 100%);
}

/* Discount badge styled as a small round ink stamp rather than a
   generic ribbon - dashed ring, slight rotation, stamp-red ink. */
.sw-ribbon {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px dashed var(--stamp-red);
    background: rgba(251, 246, 233, .9);
    color: var(--stamp-red);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    transform: rotate(-9deg);
    z-index: 3;
}

/* Small product labels (New / Best Seller) - rectangular, top-left,
   distinct from the circular discount stamp in the opposite corner. */
.sw-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3em .6em;
    border-radius: .2rem;
}
.sw-tag-featured { background: var(--stamp-red); color: #fff; }
.sw-tag-new      { background: var(--stamp-blue); color: #fff; }

.badge-stock {
    background: #E1EBE4;
    color: var(--stamp-blue-dark);
}
.badge-out {
    background: #EFE6D8;
    color: var(--ink-soft);
}

/* Order status badges (used instead of Bootstrap's flat bg-* utilities) */
/* Order status badges styled as ink-stamp impressions: dashed oval
   outline, letterspaced uppercase, slight rotation - rather than a
   flat filled pill. */
.badge-status-pending, .badge-status-processing, .badge-status-shipped,
.badge-status-delivered, .badge-status-cancelled {
    background: transparent !important;
    border: 1.5px dashed currentColor;
    border-radius: 999px;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .35em .85em;
    display: inline-block;
    transform: rotate(-2deg);
}
.badge-status-pending    { color:#8A6A1F; }
.badge-status-processing { color:#1B4695; }
.badge-status-shipped    { color:#4A2FA8; }
.badge-status-delivered  { color:#1E463E; }
.badge-status-cancelled  { color:#7E2620; }

/* Product-page customization panel - the personalization step is the
   heart of ordering a stamp, so it gets its own visually distinct
   bordered card rather than blending into the rest of the form. */
.sw-customize-panel {
    border: 1.5px solid var(--stamp-red);
    border-radius: var(--bs-border-radius-lg);
    background: var(--card);
    overflow: hidden;
}
.sw-customize-header {
    background: var(--stamp-red);
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    padding: .65rem 1.1rem;
}
.sw-customize-body { padding: 1.1rem; }

/* Faint decorative stamp watermark for the login/register card only -
   used sparingly, not sitewide. */
.sw-auth-card { position: relative; overflow: visible; }
.sw-auth-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 170px;
    height: 170px;
    border: 3px dashed var(--stamp-red);
    border-radius: 50%;
    opacity: .08;
    transform: rotate(-12deg);
    z-index: 0;
    pointer-events: none;
}
.sw-auth-card > .card-body { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.sw-section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.sw-section-title .dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--stamp-red);
    display: inline-block;
}

.sw-footer {
    background: var(--ink);
    color: #D8CDA8;
}
.sw-footer a { color: #D8CDA8; }
.sw-footer a:hover { color: #fff; }
.sw-footer h6 { color: #fff; }

.sw-faq-item .accordion-button:not(.collapsed) {
    background: #F3E8CE;
    color: var(--ink);
    box-shadow: none;
}
.sw-faq-item .accordion-button:focus { box-shadow: none; }

@media (max-width: 576px) {
    .btn { font-size: .9rem; }
    .sw-hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sw-hero-stamp { animation: none; }
}


.card-body {
    padding: 1.25rem;
}

nav svg {
    width: 1em;
}
nav p{
    margin: 1rem 0;
}