/* shared.css — Attee Fashions & Gift */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Dancing+Script:wght@600;700&family=Jost:wght@300;400;500;600&display=swap');

:root {
    --cream:      #FDF6EE;
    --cream-dark: #F5EBE0;
    --peach:      #FAD7C4;
    --dark:       #1C1410;
    --dark-mid:   #3D2B1F;
    --red:        #C0392B;
    --grad:       linear-gradient(135deg, #F77737 0%, #FCAF45 28%, #E1306C 65%, #833AB4 100%);
    --grad-text:  linear-gradient(90deg, #F77737, #E1306C, #833AB4);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Jost', sans-serif; background: var(--cream); color: var(--dark); overflow-x: hidden; }

/* ── ANNOUNCEMENT ── */
.ann-bar {
    background: var(--grad);
    color: white;
    text-align: center;
    padding: 9px 20px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ── NAVBAR ── */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(253,246,238,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--peach);
    padding: 0 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--dark); }

.logo-ring {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--grad);
    padding: 2.5px;
    flex-shrink: 0;
}

.logo-ring-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--cream);
    display: flex; align-items: center; justify-content: center;
}

.logo-script {
    font-family: 'Dancing Script', cursive;
    font-size: 1.05rem; font-weight: 700;
    background: var(--grad-text);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.logo-words { display: flex; flex-direction: column; }
.logo-brand { font-size: 0.82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dark); }
.logo-tagline { font-size: 0.6rem; letter-spacing: .08em; text-transform: uppercase; color: #aaa; }

.nav-links { display: flex; gap: 28px; list-style: none; }

.nav-links a {
    font-size: 0.76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    color: #7A5C4C; text-decoration: none;
    position: relative; transition: color .2s;
}

.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1.5px; background: var(--grad); transition: width .3s ease;
}

.nav-links a:hover, .nav-links a.active { color: var(--dark); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 18px; }

.nav-icon { width: 22px; height: 22px; color: var(--dark-mid); cursor: pointer; }

.cart-pill {
    display: flex; align-items: center; gap: 8px;
    background: var(--dark); color: white;
    padding: 9px 20px; border-radius: 50px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    border: none; cursor: pointer; text-decoration: none; transition: background .2s;
}

.cart-pill:hover { background: var(--red); }

/* ── GRAD RULE ── */
.grad-rule { height: 3px; background: var(--grad); }

/* ── BUTTONS ── */
.btn-grad {
    background: var(--grad); color: white;
    padding: 14px 34px; border-radius: 50px;
    font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; border: none; cursor: pointer;
    transition: opacity .2s, transform .2s; display: inline-block;
}
.btn-grad:hover { opacity: .88; transform: translateY(-2px); }

.btn-dark {
    background: var(--dark); color: white;
    padding: 14px 34px; border-radius: 50px;
    font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; border: none; cursor: pointer;
    transition: background .2s, transform .2s; display: inline-block;
}
.btn-dark:hover { background: var(--red); transform: translateY(-2px); }

.btn-ghost {
    font-size: 0.78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: var(--dark); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    border-bottom: 1.5px solid var(--peach); padding-bottom: 2px;
    transition: border-color .2s, gap .2s;
}
.btn-ghost:hover { border-color: var(--dark); gap: 14px; }
.btn-ghost::after { content: '→'; }

.btn-outline-white {
    display: inline-block;
    border: 1.5px solid rgba(255,255,255,.25); color: white;
    padding: 13px 30px; border-radius: 50px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; transition: border-color .2s, background .2s; white-space: nowrap;
}
.btn-outline-white:hover { border-color: white; background: rgba(255,255,255,.08); }

/* ── SECTION HEADER ── */
.sec-head { text-align: center; margin-bottom: 54px; }

.sec-kicker {
    font-size: 0.68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: 10px;
}

.sec-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem,3.5vw,3.6rem); font-weight: 400; color: var(--dark); line-height: 1.12; }
.sec-title em { font-style: italic; font-weight: 600; }

/* ── PAGE BANNER ── */
.page-banner {
    background: var(--cream-dark); padding: 70px 6%;
    text-align: center; position: relative; overflow: hidden;
    border-bottom: 1px solid var(--peach);
}
.page-banner::before {
    content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(247,119,55,.1) 0%, rgba(225,48,108,.06) 50%, transparent 70%);
    pointer-events: none;
}
.page-banner-kicker {
    font-size: 0.68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: 10px;
}
.page-banner-title {
    font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem,5vw,4.5rem); font-weight: 300;
    color: var(--dark); line-height: 1.05; margin-bottom: 12px;
}
.page-banner-title em { font-style: italic; font-weight: 600; }
.page-banner-desc { font-size: 0.95rem; color: #7A5C4C; font-weight: 300; line-height: 1.7; max-width: 480px; margin: 0 auto; }

/* ── BREADCRUMB ── */
.breadcrumb {
    padding: 14px 6%; display: flex; align-items: center; gap: 8px;
    font-size: 0.72rem; color: #B09888; border-bottom: 1px solid var(--peach);
}
.breadcrumb a { color: #B09888; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--dark); }
.breadcrumb span { color: var(--dark); font-weight: 500; }

/* ── PRODUCT CARD ── */
.p-card {
    background: var(--cream); border-radius: 20px; overflow: hidden;
    transition: transform .32s ease, box-shadow .32s ease; cursor: pointer;
}
.p-card:hover { transform: translateY(-8px); box-shadow: 0 22px 60px rgba(28,20,16,.12); }

.p-visual { height: 240px; display: flex; align-items: center; justify-content: center; position: relative; }

.p-badge {
    position: absolute; top: 15px; left: 15px;
    font-size: 0.58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 50px; color: white;
}
.badge-new  { background: var(--dark); }
.badge-hot  { background: var(--grad); }
.badge-sale { background: var(--red); }
.badge-custom { background: #833AB4; }

.p-wish {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; background: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: transform .2s; opacity: 0;
}
.p-card:hover .p-wish { opacity: 1; }
.p-wish:hover { transform: scale(1.15); }

.mini-tee {
    width: 120px; height: 108px;
    clip-path: polygon(20% 0%, 36% 0%, 50% 17%, 64% 0%, 80% 0%, 100% 22%, 80% 28%, 80% 100%, 20% 100%, 20% 28%, 0% 22%);
    display: flex; align-items: center; justify-content: center; padding-top: 18px;
}
.mini-tee-label { font-family: 'Dancing Script', cursive; font-size: 0.82rem; font-weight: 700; color: white; text-align: center; line-height: 1; }

.p-info { padding: 20px 22px 22px; }
.p-cat { font-size: 0.6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #B09888; margin-bottom: 5px; }
.p-name { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--dark); line-height: 1.15; margin-bottom: 5px; }
.p-sub { font-size: 0.68rem; color: #BBB; margin-bottom: 12px; }
.p-swatches { display: flex; gap: 5px; margin-bottom: 14px; }
.swatch { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.08); }
.p-foot { display: flex; align-items: center; justify-content: space-between; }
.p-price { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--dark); line-height: 1; }
.p-was { font-size: 0.7rem; color: #CCC; text-decoration: line-through; margin-left: 6px; }

.add-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--grad); color: white; border: none;
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .2s, transform .2s;
}
.add-btn:hover { opacity: .88; transform: scale(1.1); }

/* ── FOOTER ── */
footer, .footer { background: #100C09; padding: 72px 6% 36px; color: rgba(255,255,255,.45); }

.footer-grad-line { height: 2px; background: var(--grad); border-radius: 2px; margin-bottom: 64px; }

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }

/* Brand column */
.footer-brand .logo,
.footer-brand-col .footer-logo,
.footer-col .footer-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: white; margin-bottom: 18px; }
.footer-brand .logo-brand,
.footer-brand-col .logo-brand,
.footer-col .logo-brand { color: white; }

.footer-about { font-size: 0.83rem; font-weight: 300; line-height: 1.8; max-width: 240px; margin-bottom: 26px; color: rgba(255,255,255,.4); }

/* Social icons row */
.socials,
.footer-socials,
.ci-social { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }

.soc-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5); text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.soc-btn:hover { background: var(--grad); border-color: transparent; color: white; }
.soc-btn svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* Footer columns — support both .f-col and .footer-col */
.f-col h4,
.footer-col .footer-heading,
.footer-heading {
    font-size: 0.68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: white; margin-bottom: 22px;
}

.f-col ul,
.footer-col .footer-links,
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }

.f-col a,
.footer-col .footer-links a,
.footer-links a {
    font-size: 0.83rem; font-weight: 300;
    color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s;
}
.f-col a:hover,
.footer-col .footer-links a:hover,
.footer-links a:hover { color: rgba(255,255,255,.85); }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.07); font-size: 0.72rem; }
.footer-bottom .brand-name { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
.fu  { animation: fadeUp .65s ease both; }
.fu1 { animation: fadeUp .65s .1s ease both; }
.fu2 { animation: fadeUp .65s .2s ease both; }
.fu3 { animation: fadeUp .65s .3s ease both; }
.fu4 { animation: fadeUp .65s .4s ease both; }
.fu5 { animation: fadeUp .65s .5s ease both; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .nav-links { display: none; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-socials, .socials { gap: 8px; }
}