/* =============================================================================
   Graphite Catalog - a Luma child theme for Magento 2.4
   A calm, catalogue-first storefront: graphite and brass, serif headings,
   dense lists, clean spec tables.

   QUICK CHANGES: edit the colours and fonts in :root below, then redeploy.
   (Magento sets html { font-size: 62.5% }, so 1rem = 10px in this theme.)
   ============================================================================= */

:root {
    --gc-ink: #16191d;            /* header, headings, primary buttons */
    --gc-ink-2: #20242a;          /* navigation bar */
    --gc-ink-3: #0f1114;          /* top strip, copyright bar */
    --gc-text: #2a2e33;           /* body text */
    --gc-muted: #61676e;          /* secondary text and labels */
    --gc-line: #e4e1db;           /* hairlines */
    --gc-line-strong: #cfcac1;    /* form borders */
    --gc-paper: #fbfaf8;          /* page background */
    --gc-panel: #ffffff;          /* cards and tables */
    --gc-zebra: #f6f4f0;          /* table stripes, subtle fills */
    --gc-brass: #b8925a;          /* accents on dark backgrounds */
    --gc-brass-deep: #7a5a2e;     /* links, add to cart */
    --gc-brass-deeper: #634823;   /* hover */
    --gc-on-dark: #e9e6e1;        /* text on dark backgrounds */
    --gc-on-dark-muted: #bdb7ad;
    --gc-stock: #2f6b3a;
    --gc-sale: #8a2b2b;
    --gc-radius: 2px;
    --gc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "TeX Gyre Pagella", Georgia, serif;
    --gc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
body {
    background: var(--gc-paper);
    color: var(--gc-text);
}
body,
button,
input,
select,
textarea {
    font-family: var(--gc-sans);
}
a,
a:visited,
.alink,
.alink:visited {
    color: var(--gc-brass-deep);
}
a:hover,
.alink:hover {
    color: var(--gc-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
h1,
h2,
h3,
.page-title,
.block .block-title strong,
.block .title strong {
    font-family: var(--gc-serif);
    color: var(--gc-ink);
}
::selection {
    background: #e8dcc8;
    color: var(--gc-ink);
}
:focus-visible {
    outline: 2px solid var(--gc-brass);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.page-header {
    background: var(--gc-ink);
    border-bottom: 0;
}
.page-header .panel.wrapper {
    background: var(--gc-ink-3);
    border-bottom: 0;
}
.page-header .panel.header {
    font-size: 12px;
    letter-spacing: .02em;
}
.page-header .panel.header .greet.welcome,
.page-header .panel.header .header.links > li,
.page-header .panel.header .header.links a,
.page-header .panel.header .header.links a:visited {
    color: var(--gc-on-dark-muted);
}
.page-header .panel.header .header.links a:hover {
    color: #fff;
}

/* Text wordmark (see Magento_Theme/templates/html/header/logo.phtml) */
.logo,
.logo:hover,
.logo:visited {
    text-decoration: none;
}
.logo .logo-wordmark {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--gc-brass);
    color: var(--gc-on-dark);
    font-family: var(--gc-serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.logo:hover .logo-wordmark {
    color: #fff;
}

/* Header icons sit on a dark background */
.page-header .nav-toggle:before,
.page-header .minicart-wrapper .action.showcart:before,
.page-header .minicart-wrapper .action.showcart.active:before,
.page-header .block-search .label:before {
    color: var(--gc-on-dark);
}
.page-header .nav-toggle:hover:before,
.page-header .minicart-wrapper .action.showcart:hover:before,
.page-header .block-search .label:hover:before {
    color: #fff;
}
.page-header .minicart-wrapper .action.showcart,
.page-header .minicart-wrapper .action.showcart:visited {
    color: var(--gc-on-dark);
}
.page-header .minicart-wrapper .action.showcart .counter.qty {
    background: var(--gc-brass-deep);
    color: #fff;
    border-radius: var(--gc-radius);
}

/* ---------------------------------------------------------------------------
   Navigation (desktop: dark bar; mobile keeps Luma's slide-out menu)
   --------------------------------------------------------------------------- */
.navigation .submenu a:hover,
.navigation .level0 .submenu a.ui-state-focus {
    background: var(--gc-zebra);
    color: var(--gc-ink);
}

/* ---------------------------------------------------------------------------
   Breadcrumbs and page titles
   --------------------------------------------------------------------------- */
.breadcrumbs {
    font-size: 12px;
    letter-spacing: .02em;
}
.breadcrumbs .items,
.breadcrumbs a,
.breadcrumbs a:visited {
    color: var(--gc-muted);
}
.breadcrumbs a:hover {
    color: var(--gc-ink);
}
.breadcrumbs strong {
    color: var(--gc-text);
    font-weight: 600;
}
.page-title-wrapper .page-title {
    margin-bottom: 18px;
    color: var(--gc-ink);
    font-family: var(--gc-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.action.primary,
.action.primary:visited,
button.action.primary,
a.action.primary,
.action-primary {
    background: var(--gc-ink);
    border: 1px solid var(--gc-ink);
    border-radius: var(--gc-radius);
    color: #fff;
    font-family: var(--gc-sans);
    font-weight: 600;
    letter-spacing: .04em;
}
.action.primary:hover,
.action.primary:focus,
button.action.primary:hover,
button.action.primary:focus,
a.action.primary:hover,
.action-primary:hover,
.action-primary:focus {
    background: var(--gc-brass-deeper);
    border-color: var(--gc-brass-deeper);
    color: #fff;
}
.action.primary:active,
button.action.primary:active {
    background: #000;
    border-color: #000;
}
.action.primary.tocart,
button.action.primary.tocart,
#product-addtocart-button {
    background: var(--gc-brass-deep);
    border-color: var(--gc-brass-deep);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.action.primary.tocart:hover,
.action.primary.tocart:focus,
button.action.primary.tocart:hover,
#product-addtocart-button:hover,
#product-addtocart-button:focus {
    background: var(--gc-brass-deeper);
    border-color: var(--gc-brass-deeper);
}
.action.secondary,
button.action.secondary {
    background: #fff;
    border: 1px solid var(--gc-line-strong);
    border-radius: var(--gc-radius);
    color: var(--gc-ink);
}
.action.secondary:hover,
button.action.secondary:hover {
    background: var(--gc-zebra);
    border-color: var(--gc-ink);
    color: var(--gc-ink);
}

/* Form fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {
    border-color: var(--gc-line-strong);
    border-radius: var(--gc-radius);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--gc-brass-deep);
    box-shadow: 0 0 0 3px rgba(184, 146, 90, .25);
}

/* ---------------------------------------------------------------------------
   Category pages: filters (left), toolbar, product list and grid
   --------------------------------------------------------------------------- */
.block.filter .block-subtitle {
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gc-line);
    color: var(--gc-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.block.filter .filter-title strong {
    font-family: var(--gc-serif);
}
.filter-options .filter-options-item {
    border-bottom: 1px solid var(--gc-line);
    padding-bottom: 10px;
}
.filter-options .filter-options-title {
    color: var(--gc-ink);
    font-family: var(--gc-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.filter-options .filter-options-content .item {
    margin: 5px 0;
    line-height: 1.45;
}
.filter-options .filter-options-content a,
.filter-options .filter-options-content a:visited {
    color: var(--gc-text);
}
.filter-options .filter-options-content a:hover {
    background: transparent;
    color: var(--gc-brass-deep);
    text-decoration: underline;
}
.filter-options .filter-options-content .count,
.filter-options .filter-options-content .count:before,
.filter-options .filter-options-content .count:after {
    color: var(--gc-muted);
}
.filter-current .item {
    color: var(--gc-text);
}

.toolbar-products {
    color: var(--gc-muted);
    font-size: 13px;
}
.toolbar select,
.toolbar .sorter-options,
.toolbar .limiter-options {
    background-color: #fff;
    border-color: var(--gc-line-strong);
    border-radius: var(--gc-radius);
}
.toolbar .modes .modes-mode {
    background: #fff;
    border-color: var(--gc-line-strong);
    box-shadow: none;
    color: var(--gc-muted);
}
.toolbar .modes .modes-mode:before {
    color: var(--gc-muted);
}
.toolbar .modes .modes-mode.active {
    background: var(--gc-ink);
    border-color: var(--gc-ink);
    color: #fff;
}
.toolbar .modes .modes-mode.active:before {
    color: #fff;
}
.pages a.page,
.pages a.page:visited {
    color: var(--gc-brass-deep);
}
.pages .item.current .page {
    color: var(--gc-ink);
}

/* Shared product card text */
.product-item-name {
    margin: 10px 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}
.product-item-name a,
.product-item-link,
.product-item-link:visited {
    color: var(--gc-ink);
}
.product-item-link:hover {
    color: var(--gc-brass-deep);
}
.price-box .price {
    color: var(--gc-ink);
    font-family: var(--gc-sans);
    font-variant-numeric: tabular-nums;
}
.product-item .price-box .price {
    font-size: 15px;
    font-weight: 700;
}
.price-box .special-price .price {
    color: var(--gc-sale);
}
.price-box .old-price .price {
    color: var(--gc-muted);
    font-weight: 400;
}
/* No wish list / compare icons in listings - the product page still has them */
.products .product-item .product-item-actions .actions-secondary {
    display: none;
}

/* Calm, greyscale thumbnails that come into colour on hover.
   Delete this block if you'd rather show product photos in colour. */
.products .product-item .product-image-photo {
    filter: grayscale(100%) contrast(1.05);
    transition: filter .2s ease;
}
.products .product-item:hover .product-image-photo {
    filter: none;
}

/* Grid view: an even, dense grid without Luma's hover pop-out */
.products-grid .product-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
}
.products-grid .product-items:before,
.products-grid .product-items:after {
    display: none;
}
.products-grid .product-items .product-item,
.page-products .products-grid .product-items .product-item {
    display: block;
    width: auto !important;
    margin: 0 !important;
    padding: 0;
}
.products-grid .product-item-info,
.page-products .products-grid .product-item-info {
    box-sizing: border-box;
    width: auto !important;
    height: 100%;
    padding: 14px;
    background: var(--gc-panel);
    border: 1px solid var(--gc-line);
    transition: border-color .15s ease;
}
.products-grid .product-item-info:hover,
.page-products .products-grid .product-item-info:hover,
.products-grid .product-item-info.active {
    margin: 0 !important;
    padding: 14px !important;
    border-color: var(--gc-ink) !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
}
/* Luma hides the button area until hover (as a 1px clipped box) and pops it out on top of
   the card. Keep it in the card and always visible instead. */
.products-grid .product-item-inner,
.products-grid .product-item-info:hover .product-item-inner,
.page-products .products-grid .product-item-info:hover .product-item-inner {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.page-products .products-grid .product-item-inner:before {
    display: none;
}
.products-grid .product-item-actions {
    margin: 0;
}
.products-grid .product-item-photo {
    display: block;
}
.products-grid .product-image-container {
    display: block;
    width: 100% !important;
}
.products-grid .product-item .action.tocart {
    width: 100%;
    font-size: 12px;
}

/* List view: compact rows, like a printed catalogue */
.products-list .product-items {
    border-top: 1px solid var(--gc-line);
}
.products-list .product-item {
    margin: 0;
    padding: 16px 14px;
    background: var(--gc-panel);
    border-bottom: 1px solid var(--gc-line);
}
.products-list .product-item:hover {
    background: #fdfcfa;
}
.products-list .product-item-photo {
    width: 96px;
    padding: 0 22px 0 0;
}
.products-list .product-image-container {
    width: 96px !important;
}
.products-list .product-item-name {
    margin-top: 0;
    font-size: 15px;
}
/* Description first, then the button */
.products-list .product-item-inner {
    display: flex;
    flex-direction: column;
}
.products-list .product-item-description {
    order: -1;
    margin: 4px 0 0;
    color: var(--gc-muted);
    font-size: 13px;
    line-height: 1.5;
}
.products-list .product-item-description .action.more {
    color: var(--gc-brass-deep);
}
.products-list .product-item-actions {
    margin: 10px 0 0;
}
.products-list .product-item .action.tocart {
    padding: 8px 16px;
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Product page
   --------------------------------------------------------------------------- */
.catalog-product-view .product-info-main .page-title-wrapper .page-title {
    margin-bottom: 10px;
    font-size: 30px;
}
.product-info-main .product-info-price {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gc-line);
}
.product-info-main .price-box .price-wrapper .price,
.product-info-main .price-box .price {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
}
.product-info-main .product-info-stock-sku {
    color: var(--gc-muted);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.product-info-main .stock.available {
    color: var(--gc-stock);
}
.product-info-main .stock.unavailable {
    color: var(--gc-sale);
}
.product-info-main .product.attribute.overview {
    line-height: 1.65;
}
.product-info-main .box-tocart .input-text.qty {
    border-color: var(--gc-line-strong);
    border-radius: var(--gc-radius);
    font-variant-numeric: tabular-nums;
}
.product-social-links .action,
.product-addto-links .action,
.product-social-links .action:visited,
.product-addto-links .action:visited {
    color: var(--gc-muted);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.product-social-links .action:before,
.product-addto-links .action:before {
    color: var(--gc-muted);
}

/* Tabs (Details / More Information / Reviews) */
.product.data.items > .item.title > .switch,
.product.data.items > .item.title > .switch:visited {
    background: var(--gc-zebra) !important;
    border-color: var(--gc-line) !important;
    color: var(--gc-muted) !important;
    font-family: var(--gc-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.product.data.items > .item.title:not(.disabled) > .switch:hover {
    color: var(--gc-ink) !important;
}
.product.data.items > .item.title.active > .switch,
.product.data.items > .item.title.active > .switch:focus,
.product.data.items > .item.title.active > .switch:hover {
    background: var(--gc-panel) !important;
    box-shadow: inset 0 2px 0 var(--gc-brass);
    color: var(--gc-ink) !important;
}
.product.data.items > .item.content {
    background: var(--gc-panel);
    border-color: var(--gc-line) !important;
}

/* Spec table ("More Information"). The .product.info.detailed prefix matches the weight
   of Luma's own table rules, which would otherwise keep the table narrow and unlined. */
.product.info.detailed .additional-attributes-wrapper .additional-attributes {
    width: 100%;
    background: var(--gc-panel);
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.product.info.detailed .additional-attributes > tbody > tr > th,
.product.info.detailed .additional-attributes > tbody > tr > td {
    padding: 10px 14px;
    border-top: 1px solid var(--gc-line);
    vertical-align: top;
}
.product.info.detailed .additional-attributes > tbody > tr:first-child > th,
.product.info.detailed .additional-attributes > tbody > tr:first-child > td {
    border-top: 0;
}
.product.info.detailed .additional-attributes > tbody > tr:nth-child(even) > th,
.product.info.detailed .additional-attributes > tbody > tr:nth-child(even) > td {
    background: var(--gc-zebra);
}
.product.info.detailed .additional-attributes > tbody > tr > th {
    width: 34%;
    color: var(--gc-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: left;
    text-transform: uppercase;
}
.product.info.detailed .additional-attributes > tbody > tr > td {
    color: var(--gc-ink);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.page-footer {
    margin-top: 48px;
    background: var(--gc-ink);
    color: var(--gc-on-dark-muted);
}
.page-footer .footer.content {
    padding-top: 36px;
    padding-bottom: 28px;
    border-top: 0;
}
.page-footer .footer.content ul a,
.page-footer .footer.content ul a:visited,
.page-footer .footer.content .links a,
.page-footer .footer.content .links a:visited,
.page-footer .footer.content .links strong {
    color: var(--gc-on-dark-muted);
}
.page-footer .footer.content ul a:hover,
.page-footer .footer.content .links a:hover {
    color: #fff;
}
.page-footer .block.newsletter .title strong {
    color: var(--gc-on-dark);
}
.page-footer .block.newsletter input {
    background: #fff;
    border-color: transparent;
}
.page-footer .block.newsletter .action.subscribe {
    background: var(--gc-brass-deep);
    border-color: var(--gc-brass-deep);
    color: #fff;
}
.page-footer .block.newsletter .action.subscribe:hover {
    background: var(--gc-brass-deeper);
    border-color: var(--gc-brass-deeper);
}
.copyright {
    background: var(--gc-ink-3);
    color: var(--gc-on-dark-muted);
    letter-spacing: .04em;
}

/* ---------------------------------------------------------------------------
   Home page directory (used by homepage.html - paste it into the Home Page)
   --------------------------------------------------------------------------- */
.gc-home__intro {
    max-width: 760px;
    margin: 12px 0 8px;
}
.gc-eyebrow {
    margin: 0 0 10px;
    color: var(--gc-brass-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.gc-home__title {
    margin: 0 0 12px;
    color: var(--gc-ink);
    font-family: var(--gc-serif);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
}
.gc-home__lead {
    margin: 0;
    color: var(--gc-muted);
    font-size: 16px;
    line-height: 1.6;
}
.gc-section-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 36px 0 14px;
    color: var(--gc-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.gc-section-label:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gc-line);
}
.gc-directory {
    display: grid;
    grid-template-columns: 1fr;          /* phones: 1 column; 2 on tablets; 4 on desktop (see below) */
    background: var(--gc-panel);
    border-top: 1px solid var(--gc-line);
    border-left: 1px solid var(--gc-line);
}
.gc-directory__group {
    padding: 20px 22px 18px;
    border-right: 1px solid var(--gc-line);
    border-bottom: 1px solid var(--gc-line);
}
.gc-directory__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.gc-directory__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: no-repeat center / contain;
}
.gc-directory__title {
    margin: 0;
    font-family: var(--gc-serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
}
.gc-directory__title a,
.gc-directory__title a:visited {
    color: var(--gc-ink);
}
.gc-directory__title a:hover {
    color: var(--gc-brass-deep);
    text-decoration: none;
}
.gc-directory__links {
    margin: 0;
    padding: 0;
    list-style: none;
    column-count: 2;
    column-gap: 16px;
    font-size: 13px;
    line-height: 1.95;
}
.gc-directory__links li {
    margin: 0;
    break-inside: avoid;
}
.gc-directory__links a,
.gc-directory__links a:visited {
    color: var(--gc-text);
}
.gc-directory__links a:hover {
    color: var(--gc-brass-deep);
}
.gc-directory__more,
.gc-directory__more:visited {
    display: inline-block;
    margin-top: 8px;
    color: var(--gc-brass-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.gc-assurances {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: 28px;
    background: var(--gc-panel);
    border: 1px solid var(--gc-line);
}
.gc-assurance {
    padding: 18px 20px;
    border-right: 1px solid var(--gc-line);
}
.gc-assurance:last-child {
    border-right: 0;
}
.gc-assurance strong {
    display: block;
    margin-bottom: 2px;
    color: var(--gc-ink);
    font-family: var(--gc-serif);
    font-size: 16px;
    font-weight: 600;
}
.gc-assurance span {
    color: var(--gc-muted);
    font-size: 13px;
}
/* Directory icons (original line drawings) */
.gc-ico--metals { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a2e33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 31h36l-6-12H12z'/%3E%3Cpath d='M6 31v6h36v-6'/%3E%3Cpath d='M12 19l-2 12M36 19l2 12'/%3E%3C/svg%3E"); }
.gc-ico--plastics { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a2e33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 30l14 8 22-12-14-8z'/%3E%3Cpath d='M6 24l14 8 22-12'/%3E%3Cpath d='M6 18l14 8 22-12-14-8z'/%3E%3C/svg%3E"); }
.gc-ico--rubber { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a2e33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='14'/%3E%3Ccircle cx='24' cy='24' r='7'/%3E%3C/svg%3E"); }
.gc-ico--foam { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a2e33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='12' width='34' height='24' rx='2'/%3E%3Ccircle cx='15' cy='20' r='2'/%3E%3Ccircle cx='25' cy='18' r='1.5'/%3E%3Ccircle cx='33' cy='22' r='2.5'/%3E%3Ccircle cx='18' cy='29' r='1.5'/%3E%3Ccircle cx='29' cy='29' r='2'/%3E%3C/svg%3E"); }
.gc-ico--composites { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a2e33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='10' width='28' height='28'/%3E%3Cpath d='M10 17h28M10 24h28M10 31h28M17 10v28M24 10v28M31 10v28'/%3E%3C/svg%3E"); }
.gc-ico--glass { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a2e33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='7' width='24' height='34' rx='1'/%3E%3Cpath d='M17 17l7-7M17 26l14-14'/%3E%3C/svg%3E"); }
.gc-ico--wood { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a2e33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='16' width='38' height='16' rx='1'/%3E%3Cpath d='M9 22c6-3 12 3 18 0s9-2 12 0M9 27c6-2 10 2 16 0s9-2 14 0'/%3E%3C/svg%3E"); }
.gc-ico--fabric { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232a2e33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='24' r='8'/%3E%3Ccircle cx='14' cy='24' r='3'/%3E%3Cpath d='M14 16h26v16H14'/%3E%3Cpath d='M40 16v16'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------------------
   Desktop (768px and wider)
   --------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .gc-directory {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .gc-directory {
        grid-template-columns: repeat(4, 1fr);   /* 8 groups = two full rows */
    }
}
@media (min-width: 768px) {
    .page-header {
        margin-bottom: 0;   /* the navigation bar sits flush under the header */
    }
    /* Search-first header: wordmark, a wide search box, then the cart */
    .page-header .header.content {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 32px;
        padding-top: 22px;
        padding-bottom: 22px;
    }
    .page-header .header.content:before,
    .page-header .header.content:after {
        display: none;
    }
    .page-header .header.content > .logo {
        order: 1;
        flex: 0 0 auto;
        float: none;
        max-width: none;
        margin: 0;
    }
    .page-header .header.content > .block-search {
        order: 2;
        flex: 1 1 auto;
        float: none;
        width: auto;
        max-width: 720px;
        margin: 0 auto 0 0;
        padding: 0;
    }
    .page-header .header.content > .minicart-wrapper {
        order: 3;
        float: none;
        margin: 0 0 0 auto;
    }
    .page-header .header.content > .compare.wrapper {
        display: none;
    }
    .page-header .block-search input,
    .page-header .block-search input#search {
        height: 44px;
        padding: 0 48px 0 16px;
        background: #fff;
        border: 1px solid transparent;
        color: var(--gc-text);
        font-size: 15px;
    }
    .page-header .block-search input:focus {
        border-color: var(--gc-brass);
        box-shadow: 0 0 0 3px rgba(184, 146, 90, .35);
    }
    .page-header .block-search .action.search {
        top: 6px;
        right: 12px;
    }

    .nav-sections {
        margin-bottom: 28px;
        background: var(--gc-ink-2);
        border-top: 1px solid rgba(255, 255, 255, .06);
    }
    .nav-sections .navigation {
        background: transparent;
        font-weight: 500;
    }
    .navigation .level0 > .level-top,
    .navigation .level0 > .level-top:visited {
        padding: 0 14px;
        color: var(--gc-on-dark-muted);
        font-size: 12px;
        line-height: 46px;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    .navigation .level0 > .level-top:hover,
    .navigation .level0 > .level-top.ui-state-focus {
        color: #fff;
        text-decoration: none;
    }
    .navigation .level0.active > .level-top,
    .navigation .level0.has-active > .level-top {
        border-color: var(--gc-brass);
        border-width: 0 0 2px;
        color: #fff;
    }
    .navigation .level0 .submenu {
        background: var(--gc-panel);
        border: 1px solid var(--gc-line-strong);
        box-shadow: 0 8px 24px rgba(22, 25, 29, .12);
    }
    .navigation .level0 .submenu a,
    .navigation .level0 .submenu a:visited {
        color: var(--gc-text);
        font-size: 13px;
    }
}

/* ---------------------------------------------------------------------------
   Phones (up to 767px)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .logo .logo-wordmark {
        padding-bottom: 4px;
        font-size: 18px;
        letter-spacing: .06em;
    }
    .navigation .level0.active > .level-top,
    .navigation .level0.has-active > .level-top,
    .navigation .level0 > .level1.active {
        border-color: var(--gc-brass-deep);
    }
    .page-title-wrapper .page-title,
    .catalog-product-view .product-info-main .page-title-wrapper .page-title {
        font-size: 24px;
    }
    .gc-home__title {
        font-size: 28px;
    }
    .gc-directory__links {
        column-count: 2;
    }
    .gc-assurance {
        border-right: 0;
        border-bottom: 1px solid var(--gc-line);
    }
    .gc-assurance:last-child {
        border-bottom: 0;
    }
    /* On phones Luma lists footer links as light grey rows; keep them on the dark footer */
    .page-footer .footer.content {
        border-top: 0;
    }
    .page-footer .footer.content .links > li {
        background: transparent;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
}