/* ================================================================
   PAGE.CSS — generic WP Page wrapper (page.php)
   Minimal, typographic — this exists so plugin/shortcode content
   (Wishlist, Compare, galleries, etc.) reads correctly inside the real
   site chrome instead of unstyled, not to art-direct every such page.
   ================================================================ */

.page-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--sp-10);
}

.page-header__title {
    font-size: var(--text-3xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
    color: var(--color-text);
}

.page-header__sub {
    margin-top: var(--sp-3);
    font-size: var(--text-md);
    color: var(--color-text-muted);
    max-width: 640px;
}

.page-main {
    padding-block: var(--sp-10);
}

.page-content {
    max-width: 860px;
    margin-inline: auto;
    color: var(--color-text);
    line-height: var(--lh-relaxed);
}

.page-content h2 {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    margin-block: var(--sp-8) var(--sp-3);
}

.page-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--fw-semi);
    margin-block: var(--sp-6) var(--sp-2);
}

.page-content p {
    margin-bottom: var(--sp-4);
}

.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-lg);
}

.page-content a {
    color: var(--color-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* .page-content a's (0,1,1) specificity otherwise beats .btn-primary/
   .btn-outline's own (0,1,0) rule, underlining what should read as a
   plain pill button (found on the Offers page's injected empty-state
   CTA). Both buttons are outline-style with blue text now, same as
   .page-content a's own color, so no color override is needed here
   any more — just strip the underline. */
.page-content a.btn-primary,
.page-content a.btn-outline {
    text-decoration: none;
}

.page-content ul,
.page-content ol {
    margin: 0 0 var(--sp-4) var(--sp-6);
}

/* ── 3T Gallery ───────────────────────────────────────────────── */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-8) var(--sp-12);
}

@media (min-width: 640px) {
    .photo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .photo-grid { grid-template-columns: repeat(4, 1fr); }
}

.photo-grid__item {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--color-gray-100);
    box-shadow: var(--shadow-sm);
}

.photo-grid__item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.photo-grid__item:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .photo-grid__item:hover img { transform: none; }
}

/* ── Empty state (Compare, and anywhere else that needs one) ───── */

.empty-state {
    max-width: 440px;
    margin-inline: auto;
    padding-block: var(--sp-16);
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state svg {
    color: var(--color-blue);
    margin-bottom: var(--sp-5);
}

.empty-state__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    margin-bottom: var(--sp-2);
}

.empty-state__text {
    margin-bottom: var(--sp-6);
    line-height: var(--lh-relaxed);
}

/* ── Wishlist hero (page-wishlist-3.php) ─────────────────────────
   Same navy-gradient + ambient-glow hero family as Compare's own (see
   that file's comment) — the generic .page-header stays deliberately
   plain for Offers/About/etc., but this page gets its own. */
.wishlist-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-navy-dark), var(--color-navy));
    padding-block: var(--sp-12);
}

.wishlist-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.wishlist-hero__glow--1 {
    width: 420px;
    height: 420px;
    top: -220px;
    left: -120px;
    background: var(--color-blue);
    opacity: 0.35;
}

.wishlist-hero__glow--2 {
    width: 280px;
    height: 280px;
    bottom: -160px;
    right: -80px;
    background: var(--color-blue-light);
    opacity: 0.2;
}

.wishlist-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.wishlist-hero__eyebrow {
    display: inline-block;
    padding: 4px var(--sp-3);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-blue-light);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--sp-3);
}

.wishlist-hero__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    font-size: var(--text-3xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
    color: var(--color-white);
}

.wishlist-hero__title svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: #ff6b6b;
    transform-origin: center;
    animation: wishlist-heartbeat 2.6s ease-in-out infinite;
}

@keyframes wishlist-heartbeat {
    0%, 100% { transform: scale(1); }
    15%      { transform: scale(1.18); }
    30%      { transform: scale(1); }
    45%      { transform: scale(1.12); }
    60%      { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-hero__title svg { animation: none; }
}

.wishlist-hero__sub {
    margin: var(--sp-3) auto 0;
    max-width: 460px;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-md);
}

@media (max-width: 479px) {
    .wishlist-hero__title { font-size: var(--text-2xl); gap: var(--sp-2); }
    .wishlist-hero__title svg { width: 24px; height: 24px; }
}

/* ── Wishlist (wcboost-wishlist plugin reskin) ───────────────────
   The plugin renders a plain WooCommerce-style <table>; this reshapes
   it into row-cards that match the rest of the site instead of
   overriding the plugin's own PHP templates. */

.wishlist-wrap {
    padding-block: var(--sp-8) var(--sp-16);
}

.wishlist-wrap .woocommerce-info {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: var(--sp-8);
    text-align: center;
    color: var(--color-text-muted);
}

.wishlist-wrap .return-to-shop {
    text-align: center;
    margin-top: var(--sp-5);
}

.wishlist-wrap .return-to-shop .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4) var(--sp-8);
    background: transparent;
    border: 1.5px solid var(--color-blue);
    color: var(--color-blue);
    border-radius: var(--r-full);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    transition: border-color var(--t-fast), color var(--t-fast);
}

.wishlist-wrap .return-to-shop .button:hover {
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

.wishlist-wrap table.wishlist_table,
.wishlist-wrap table.wishlist_table thead,
.wishlist-wrap table.wishlist_table tbody,
.wishlist-wrap table.wishlist_table tr,
.wishlist-wrap table.wishlist_table th,
.wishlist-wrap table.wishlist_table td {
    display: block;
    width: 100%;
}

.wishlist-wrap table.wishlist_table {
    border-collapse: collapse;
}

.wishlist-wrap table.wishlist_table thead {
    display: none; /* row cards below don't need a header row */
}

/* Grid, not flex — a bigger image needs to sit as its own left-hand
   column spanning the name's and price's rows, with a full-width
   stock-status row above BOTH of them (off the photo, but still the
   first thing at the top of the card) and the cart button anchored to
   the card's own bottom-right corner. That's the product-card's own
   recipe (a footer price + a circular cart-btn), adapted to a wide
   row instead of a tall card. */
.wishlist-wrap table.wishlist_table tr {
    position: relative;
    display: grid;
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: var(--sp-5);
    row-gap: 2px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    padding-right: 64px; /* room for the absolute cart button, bottom-right */
    margin-bottom: var(--sp-5);
    min-height: 220px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
    /* Staggered fade-up on load — same "the page feels alive, not
       static" cue as the rest of the site (home.js's [data-animate]
       sections, the product page's own entrance touches), just done
       in pure CSS since this markup is the plugin's own, not ours to
       add data-animate to. nth-child covers the first 5 explicitly so
       a short list still staggers properly; anything past that shares
       the last delay rather than taking forever to appear. */
    animation: wishlist-row-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.wishlist-wrap table.wishlist_table tr:nth-child(1) { animation-delay: 0.04s; }
.wishlist-wrap table.wishlist_table tr:nth-child(2) { animation-delay: 0.1s; }
.wishlist-wrap table.wishlist_table tr:nth-child(3) { animation-delay: 0.16s; }
.wishlist-wrap table.wishlist_table tr:nth-child(4) { animation-delay: 0.22s; }
.wishlist-wrap table.wishlist_table tr:nth-child(n+5) { animation-delay: 0.28s; }

@keyframes wishlist-row-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wishlist-wrap table.wishlist_table tr:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-blue);
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-wrap table.wishlist_table tr { animation: none; }
    .wishlist-wrap table.wishlist_table tr:hover { transform: none; }
}

.wishlist-wrap table.wishlist_table td {
    width: auto;
    border: none;
    padding: 0;
}

/* The plugin's own responsive-table CSS injects a ::before label
   (content: attr(data-title) ": ") on every cell below its own
   breakpoint — meant for its default stacked-table fallback, but this
   card layout already makes each value self-explanatory (thumbnail +
   name, a price, a stock badge, a button), so the labels just show up
   as redundant "Product: " / "Price: " text — or a bare ":" on cells
   with no data-title at all (Remove, Add to cart). */
.wishlist-wrap table.wishlist_table td::before {
    content: none !important;
}

.wishlist-wrap .product-thumbnail {
    grid-column: 1;
    grid-row: 2 / 4;
    position: relative;
}

.wishlist-wrap .product-thumbnail img {
    display: block;
    /* !important — the plugin's own wishlist.css sets
       .wcboost-wishlist__item .product-thumbnail img { max-width: 5em }
       at equal selector specificity to this rule; max-width always
       clamps the used width regardless of which rule "wins" width
       itself, so without overriding it explicitly here the image was
       being squeezed down to ~65px no matter what width was set to. */
    width: 160px !important;
    max-width: 160px !important;
    height: 160px;
    object-fit: contain;
    border-radius: var(--r-lg);
    /* White, not gray — see product-card.css's __img-wrap. */
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: var(--sp-3);
    transition: transform var(--t-slow);
}

.wishlist-wrap table.wishlist_table tr:hover .product-thumbnail img {
    transform: scale(1.05);
}

/* Discount badge — the actual "-X%" figure, computed client-side by
   wishlist-page.js from the plugin's del/ins price amounts (it never
   hands over a discount rate itself) and injected as the first child
   of .product-name, which is why this sits above the product link
   rather than needing its own grid cell. */
.wishlist-wrap .wishlist-discount-badge {
    display: inline-block;
    padding: 3px var(--sp-3);
    margin-bottom: 6px;
    border-radius: var(--r-full);
    background: var(--color-navy);
    color: var(--color-white);
    font-size: 11px;
    font-weight: var(--fw-bold);
}

.wishlist-wrap table.wishlist_table td.product-name {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    /* min-width:0 — a grid/flex item's default min-width is "auto"
       (its content's own natural width), which blocks it from ever
       shrinking below that — and text-overflow:ellipsis below needs
       it to actually shrink to the column's real width for the
       truncation to kick in at all. */
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.wishlist-wrap table.wishlist_table td.product-name a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
    transition: color var(--t-fast);
}

.wishlist-wrap table.wishlist_table td.product-name a:hover { color: var(--color-blue); }

/* Real brand name (Seiko, Citizen, Westar...) — fetched by
   wishlist-page.js from toman/v1/brands-by-ids and injected right
   before the product link, same small-caps treatment as the brand
   label on a product card/product page. */
.wishlist-wrap .wishlist-brand {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: var(--color-blue);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: 2px;
}

/* Left-aligned, under the brand/model — same left edge as the rest of
   the text column, not pushed over to sit above the cart button. The
   cart button stays right where it was (position:absolute, card's own
   bottom-right corner, unaffected by this). */
.wishlist-wrap .product-price {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: start;
    text-align: left;
    margin-top: 4px;
}

/* Sale price bold and first, original price small/struck underneath —
   same price hierarchy as the compare cards and product cards, so a
   watch reads the same "deal" story everywhere it appears. The plugin
   nests del/ins inside a currency-switcher wrapper span, not .price
   directly, so that's the actual flex container here. */
.wishlist-wrap .product-price .woocs_price_code {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.wishlist-wrap .product-price .amount {
    font-size: var(--text-md);
    font-weight: var(--fw-black);
    color: var(--color-text);
    white-space: nowrap;
}

.wishlist-wrap .product-price del { order: 2; text-decoration: line-through; }
.wishlist-wrap .product-price del .amount { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--color-gray-500); }

.wishlist-wrap .product-price ins { order: 1; text-decoration: none; }
.wishlist-wrap .product-price ins .amount { color: var(--color-blue-dark); }

/* Its own full-width row at the very top of the card, above both the
   photo and the name/price column — "on top" without sitting ON the
   photo itself (that overlay treatment was crowding the discount
   badge and made stock status read as part of the image instead of
   the watch's own status). */
.wishlist-wrap .product-stock-status {
    grid-column: 1 / 3;
    grid-row: 1;
    margin-bottom: var(--sp-3);
    font-size: 11px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wishlist-wrap .product-stock-status .in-stock,
.wishlist-wrap .product-stock-status .out-of-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wishlist-wrap .product-stock-status .in-stock::before,
.wishlist-wrap .product-stock-status .out-of-stock::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wishlist-wrap .product-stock-status .in-stock { color: #1a7a3f; }
.wishlist-wrap .product-stock-status .in-stock::before { background: #1a7a3f; }
.wishlist-wrap .product-stock-status .out-of-stock { color: #c0392b; }
.wishlist-wrap .product-stock-status .out-of-stock::before { background: #c0392b; }

/* Bottom-right corner of the card, same circular icon-only recipe as
   .product-card__cart-btn (product-card.css) — 38px, solid navy,
   white cart glyph — instead of a full text pill, for visual parity
   with how every other product listing on the site presents "add to
   cart". The plugin's link keeps its text for screen readers/SEO;
   font-size:0 just stops it from being painted, and the glyph comes
   in as a background image since nothing here can inject a real
   inline SVG into the plugin's own markup. */
.wishlist-wrap .product-add-to-cart {
    position: absolute;
    right: var(--sp-4);
    bottom: var(--sp-4);
}

.wishlist-wrap .product-add-to-cart a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 0;
    color: transparent;
    background-color: var(--color-navy);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--t-fast), transform var(--t-press), box-shadow var(--t-fast);
}

.wishlist-wrap table.wishlist_table tr:hover .product-add-to-cart a {
    box-shadow: var(--shadow-glow-sm);
}

.wishlist-wrap .product-add-to-cart a:hover { background-color: var(--color-blue-dark); }
.wishlist-wrap .product-add-to-cart a:active { transform: scale(0.93); }

/* A genuine add-to-cart failure (store-api.js sets .is-error + a title
   tooltip with the real message) — the label text it also sets stays
   invisible per font-size:0 above (a 38px circle has nowhere to put a
   sentence), so the red flash is what actually tells the visitor
   something went wrong rather than the click silently doing nothing. */
.wishlist-wrap .product-add-to-cart a.is-error {
    background-color: #c0392b !important;
    background-image: none !important;
    animation: wishlist-cart-shake 0.4s ease;
}

@keyframes wishlist-cart-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* Out-of-stock watches — the plugin's own row markup renders the exact
   same "Add to cart" ajax link regardless of purchasability, so
   clicking it on an out-of-stock item was firing a Store API call
   that could only fail, surfacing a raw/confusing error where nothing
   visibly happened otherwise. :has() reaches up from the real stock
   status (already reliably .in-stock / .out-of-stock, same markup the
   top-of-card badge reads) to grey the button out and hard-block the
   click — pointer-events:none stops the request from ever firing,
   which is what actually fixes this rather than just hiding the
   symptom. */
.wishlist-wrap table.wishlist_table tr:has(.product-stock-status .out-of-stock) .product-add-to-cart a {
    background-color: var(--color-gray-300) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
    box-shadow: none !important;
    pointer-events: none;
    cursor: not-allowed;
}

.wishlist-wrap .product-remove {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
}

.wishlist-wrap .product-remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-press);
}

.wishlist-wrap .product-remove a:hover { background: #fde8e8; color: #c0392b; }
.wishlist-wrap .product-remove a:active { transform: scale(0.9); }

/* ── Share — trimmed to the handful of networks actually relevant to
   this audience. The plugin's full default list (Digg, StumbleUpon,
   Vk, Tumblr...) reads as dated clutter rather than real sharing
   options on a Gulf-market watch site; WhatsApp is genuinely the
   channel this business leans on elsewhere (see the product page's
   own "Ask on WhatsApp" button). ── */
.wishlist-wrap .wishlist-share {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--color-border);
}

.wishlist-wrap .wishlist-share__title {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-3);
}

.wishlist-wrap .wishlist-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wishlist-share__twitter,
.wishlist-share__linkedin,
.wishlist-share__tumblr,
.wishlist-share__reddit,
.wishlist-share__stumbleupon,
.wishlist-share__telegram,
.wishlist-share__pocket,
.wishlist-share__digg,
.wishlist-share__vk {
    display: none !important;
}

.wishlist-wrap .wcboost-wishlist-share-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-bg);
    border-radius: var(--r-full);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
    transition: background var(--t-fast), color var(--t-fast);
}

.wishlist-wrap .wcboost-wishlist-share-link:hover {
    background: var(--color-blue-subtle);
    color: var(--color-blue);
}

.wishlist-wrap .wcboost-wishlist-share-link__icon {
    display: flex;
    width: 15px;
    height: 15px;
}

.wishlist-wrap .wcboost-wishlist-share-link__icon svg { width: 100%; height: 100%; fill: currentColor; }

.wishlist-wrap .wcboost-wishlist-edit-link-wrapper {
    margin-top: var(--sp-4);
}

.wishlist-wrap .wcboost-wishlist-edit-link {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--t-fast);
}

.wishlist-wrap .wcboost-wishlist-edit-link:hover { color: var(--color-blue); }

@media (max-width: 479px) {
    /* Same grid recipe, just smaller — a 160px image plus a 64px
       corner reserve doesn't leave enough of a ~340px-wide phone
       screen for the name/price column to read comfortably. Still
       noticeably bigger than a thumbnail, just not the full desktop
       160px. Padding/gaps loosen rather than tighten further here —
       a cramped mobile card is worse than a slightly taller one. */
    .wishlist-wrap table.wishlist_table tr {
        grid-template-columns: 120px 1fr;
        column-gap: var(--sp-4);
        row-gap: 6px;
        padding: var(--sp-4);
        padding-right: 52px;
        min-height: 190px;
    }

    .wishlist-wrap .product-thumbnail img { width: 120px !important; max-width: 120px !important; height: 120px; }
    .wishlist-wrap .product-stock-status { font-size: 10px; margin-bottom: var(--sp-2); }

    .wishlist-wrap .wishlist-discount-badge { margin-bottom: var(--sp-2); }
    .wishlist-wrap .wishlist-brand { margin-bottom: 4px; }
    .wishlist-wrap table.wishlist_table td.product-name { gap: 3px; line-height: 1.3; }

    .wishlist-wrap .product-add-to-cart { right: var(--sp-3); bottom: var(--sp-3); }
    .wishlist-wrap .product-add-to-cart a { width: 34px; height: 34px; background-size: 15px 15px; }

    .wishlist-wrap .product-remove { top: var(--sp-3); right: var(--sp-3); }
    .wishlist-wrap .product-remove a { width: 26px; height: 26px; font-size: 1rem; }
}

/* ── Compare hero (page-compare.php) ─────────────────────────────
   The generic .page-header (plain surface band + black title) is
   deliberately undecorated — right for a Wishlist/Offers utility page,
   but it made Compare's own actual selling point (a fun, easy side-by-
   side tool) look like a bare settings screen before you even reach
   it. Navy gradient + soft ambient glows is the same "personal touch"
   depth cue used elsewhere (product page gallery, Visit Us section on
   the homepage) rather than a new visual language. */
.compare-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-navy-dark), var(--color-navy));
    padding-block: var(--sp-12);
}

.compare-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.compare-hero__glow--1 {
    width: 420px;
    height: 420px;
    top: -220px;
    right: -120px;
    background: var(--color-blue);
    opacity: 0.35;
}

.compare-hero__glow--2 {
    width: 280px;
    height: 280px;
    bottom: -160px;
    left: -80px;
    background: var(--color-blue-light);
    opacity: 0.2;
}

.compare-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.compare-hero__eyebrow {
    display: inline-block;
    padding: 4px var(--sp-3);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-blue-light);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--sp-3);
}

.compare-hero__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    font-size: var(--text-3xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
    color: var(--color-white);
}

.compare-hero__title svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--color-blue-light);
}

.compare-hero__sub {
    margin: var(--sp-3) auto 0;
    max-width: 460px;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--text-md);
}

@media (max-width: 479px) {
    .compare-hero__title { font-size: var(--text-2xl); gap: var(--sp-2); }
    .compare-hero__title svg { width: 26px; height: 26px; }
}

/* ── Compare grid (compare-page.js) ──────────────────────────────
   A grid of self-contained cards — one per product, each carrying its
   own full spec list — rather than a <table> with a sticky label
   column and the product columns scrolling sideways under it. That
   pattern is a reasonable desktop trick but reads as broken on a
   phone (barely one column fits, nothing hints there's more to
   scroll to). A card grid is just grid-template-columns: 1fr below
   640px (a plain stack, nothing to discover) and N columns above it —
   one structure, no separate mobile render path. Same "label:value
   row" visual language as the product page's Specifications tab. */

.compare-table-wrap {
    padding-block: var(--sp-6) var(--sp-16);
}

/* Below 640px: a horizontal, snap-paged row — exactly two cards'
   width each (the add tile counts as a "card" for this too), so
   comparing the first two watches never needs any scrolling at all,
   and a 3rd/4th watch pages in as a clean next pair instead of
   dragging a single column past in an endless vertical stack (which
   meant scrolling down to check watch #2's spec, then back up to
   re-check watch #1's — the thing this is fixing). Desktop's own
   multi-column grid (below) was never the problem; only the mobile
   single-column stack was. */
.compare-grid {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.compare-grid::-webkit-scrollbar { display: none; }

.compare-card,
.compare-card--add {
    scroll-snap-align: start;
    flex: 0 0 calc(50% - var(--sp-4) / 2);
    min-width: 0;
}

@media (min-width: 640px) {
    .compare-grid {
        display: grid;
        grid-template-columns: repeat(var(--compare-cols, 2), minmax(0, 340px));
        justify-content: center;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .compare-card,
    .compare-card--add {
        flex: none;
    }
}

/* Mobile only, and only rendered at all once there's a 3rd/4th card
   hidden past the edge (compare-page.js) — nudges right on a loop so
   it reads as "there's more over here", not just static text. */
.compare-swipe-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
}

.compare-swipe-hint__icon {
    display: flex;
    color: var(--color-blue);
    animation: compare-swipe-nudge 1.4s ease-in-out infinite;
}

@keyframes compare-swipe-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}

@media (max-width: 639px) {
    .compare-swipe-hint { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .compare-swipe-hint__icon { animation: none; }
}

.compare-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
}

.compare-card__remove {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-muted);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-press);
}

.compare-card__remove:hover { background: #fde8e8; color: #c0392b; }
.compare-card__remove:active { transform: scale(0.9); }

.compare-card__product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--sp-3);
}

.compare-card__img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1;
    background: var(--color-white);
    border-radius: var(--r-lg);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.compare-card__img-wrap img { width: 100%; height: 100%; object-fit: contain; }

.compare-card__name {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.compare-card__price {
    text-align: center;
    margin-bottom: var(--sp-2);
}

.compare-card__price-sale {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--fw-black);
    color: var(--color-text);
}

/* Always its own line under the sale price — never inline beside it.
   Inline, whether this wraps depends on the card's width and how many
   digits each price happens to have, so some cards would sit at one
   line and others at two purely by chance, throwing every row below
   (Add to Cart, every spec row) out of alignment across the cards next
   to it. Always-block makes the price block's height the same for
   every on-sale card regardless of width or digit count. */
.compare-card__price-regular {
    display: block;
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    text-decoration: line-through;
}

/* Shrink-to-fit + auto-margin centers it regardless of the card's own
   flex context — simpler than fighting flex alignment for one line. */
.compare-card__badge {
    display: table;
    margin: 0 auto var(--sp-3);
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: #c0392b;
}

.compare-card__badge--best {
    padding: 3px var(--sp-3);
    border-radius: var(--r-full);
    background: rgba(26, 122, 63, 0.12);
    color: #1a7a3f;
}

.compare-card__add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-blue);
    color: var(--color-white);
    border-radius: var(--r-full);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    margin-bottom: var(--sp-5);
    transition: background var(--t-fast), transform var(--t-press);
}

.compare-card__add-cart:hover { background: var(--color-blue-dark); }
.compare-card__add-cart:active { transform: scale(0.97); }

/* Variable/unpurchasable products route to the product page instead —
   this one stays outline since it's not actually adding to cart. */
.compare-card__add-cart--outline {
    background: transparent;
    border: 1.5px solid var(--color-blue);
    color: var(--color-blue);
}

.compare-card__add-cart--outline:hover { background: var(--color-blue-subtle); }

.compare-card__specs {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin: 0;
}

.compare-card__spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    margin: 0;
}

.compare-card__spec-row:nth-child(even) { background: var(--color-bg); }

.compare-card__spec-row dt { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.compare-card__spec-row dd { margin: 0; color: var(--color-text); font-weight: var(--fw-semi); text-align: right; }

/* Differing values get called out — bold blue text plus a small
   accent bar on the row's left edge. A value every compared product
   shares (or is equally missing) stays in the quiet default style
   above — nothing to see there, so nothing draws the eye. */
.compare-card__spec-row.is-diff {
    position: relative;
    background: var(--color-blue-subtle);
}

.compare-card__spec-row.is-diff::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 3px;
    background: var(--color-blue);
}

.compare-card__spec-row.is-diff dd { color: var(--color-blue-dark); font-weight: var(--fw-bold); }

.compare-card__na { color: var(--color-text-muted); }
.compare-card__instock { color: #1a7a3f; font-weight: var(--fw-semi); }
.compare-card__oos     { color: #c0392b; font-weight: var(--fw-semi); }

/* Empty slot inviting a 5th... well, up to TomanCompare.MAX-th watch —
   only rendered while there's still room, so it never crowds out a
   full set of real cards. */
.compare-card--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    min-height: 280px;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--r-xl);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    text-align: center;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.compare-card--add:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
    background: var(--color-blue-subtle);
}

.compare-card__add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg);
    color: inherit;
    transition: background var(--t-fast);
}

.compare-card--add:hover .compare-card__add-icon { background: var(--color-white); }

/* Two cards share the screen width below 640px (see .compare-grid
   above) — tighter padding and a smaller price/name buy the actual
   spec values enough room to sit on one line instead of wrapping
   awkwardly in a ~150px column. */
@media (max-width: 639px) {
    .compare-card {
        padding: var(--sp-3);
    }

    .compare-card__img-wrap {
        padding: var(--sp-2);
        margin-bottom: var(--sp-2);
    }

    .compare-card__name {
        font-size: var(--text-xs);
    }

    .compare-card__price-sale {
        font-size: var(--text-md);
    }

    .compare-card__add-cart {
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--text-xs);
        margin-bottom: var(--sp-3);
    }

    .compare-card__spec-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: var(--sp-2) var(--sp-3);
    }

    .compare-card__spec-row dd {
        text-align: left;
    }

    .compare-card--add {
        min-height: 200px;
    }
}